/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  color-scheme: light;
  --bg: #f7f8fb;
  --panel: #ffffff;
  --panel-subtle: #fbfcfe;
  --panel-raised: #ffffff;
  --control: #ffffff;
  --control-hover: #f4f7fb;
  --ink: #172033;
  --ink-soft: #344054;
  --muted: #667085;
  --line: #d9dee8;
  --accent: #0f766e;
  --accent-soft: #e6f4f1;
  --accent-strong: #0f766e;
  --warn: #b45309;
  --warn-soft: #fff4de;
  --ok: #15803d;
  --ok-soft: #e7f6ec;
  --danger: #b42318;
  --danger-soft: #fff1f0;
  --danger-line: #f7c7c2;
  --info: #344e96;
  --info-soft: #eef4ff;
  --info-line: #c7d7fe;
  --shadow: rgba(15, 23, 42, 0.14);
  --shadow-strong: rgba(15, 23, 42, 0.24);
  --backdrop: rgba(15, 23, 42, 0.38);
  --tooltip-bg: #12352a;
  --tooltip-text: #f7fffb;
  --tooltip-muted: #cdeadc;
  --file-surface: #f8fafc;
  --tag-bg: #eef2f7;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111116;
  --panel: #1d1d22;
  --panel-subtle: #18181d;
  --panel-raised: #24242b;
  --control: #23232a;
  --control-hover: #2b2b34;
  --ink: #f2f3f7;
  --ink-soft: #d6d8e1;
  --muted: #a1a6b5;
  --line: #353640;
  --accent: #8b8cff;
  --accent-soft: #2b2b49;
  --accent-strong: #a5a6ff;
  --warn: #f3b95f;
  --warn-soft: #3a2d18;
  --ok: #72d391;
  --ok-soft: #1f3528;
  --danger: #ff8b80;
  --danger-soft: #3a2022;
  --danger-line: #693236;
  --info: #b6c4ff;
  --info-soft: #252d4a;
  --info-line: #475381;
  --shadow: rgba(0, 0, 0, 0.34);
  --shadow-strong: rgba(0, 0, 0, 0.46);
  --backdrop: rgba(0, 0, 0, 0.58);
  --tooltip-bg: #0f1017;
  --tooltip-text: #ffffff;
  --tooltip-muted: #c9cede;
  --file-surface: #25262d;
  --tag-bg: #2b2d36;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.appShell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: var(--panel-subtle);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
}

.brand {
  margin-bottom: 28px;
}

.brand a {
  min-width: 0;
}

.brand strong {
  display: block;
  font-size: 18px;
}

.brand a span {
  color: var(--muted);
  font-size: 13px;
}

.environmentBadge {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  max-width: 100%;
  border: 1px solid var(--warn);
  border-radius: 6px;
  padding: 4px 8px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.nav {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.navPrimary,
.navSecondary > div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.navPrimary {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  padding-bottom: 10px;
}

.nav a,
.navSecondary summary {
  align-items: center;
  border-radius: 6px;
  color: var(--ink-soft);
  display: flex;
  font-size: 14px;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
}

.nav a:hover,
.navSecondary summary:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.nav a span:last-child,
.navSecondary summary span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navMoreLabelMobile {
  display: none;
}

.navPrimary a {
  font-weight: 600;
}

.navSecondary {
  color: var(--ink-soft);
}

.navSecondary summary {
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

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

.navSecondary summary::after {
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  content: "";
  height: 6px;
  margin-left: auto;
  opacity: 0.72;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
  width: 6px;
}

.navSecondary[open] summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.navSecondary > div {
  border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  margin: 4px 0 0 17px;
  padding: 4px 0 0 8px;
}

.navIcon,
.navSummaryIcon {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.nav a:hover .navIcon,
.navSecondary summary:hover .navSummaryIcon {
  color: var(--accent);
}

.sidebarFooter {
  display: grid;
  grid-gap: 0;
  gap: 0;
  margin-top: auto;
}

.sidebarBackup {
  display: grid;
  padding-bottom: 14px;
}

.sidebarBottom {
  border-top: 1px solid var(--line);
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  padding-top: 14px;
}

.mainShell {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
}

.themeToggle {
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  font-size: 13px;
  justify-content: space-between;
  margin-top: 1px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: auto;
}

.backupButton {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: inline-flex;
  font-size: 13px;
  gap: 9px;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 10px;
  text-decoration: none;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.backupButton:hover,
.backupButton:focus-visible {
  background: var(--panel);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.backupButton span {
  white-space: nowrap;
}

.themeToggle span {
  white-space: nowrap;
}

.themeToggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.themeToggle i {
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px var(--shadow);
  display: inline-flex;
  height: 22px;
  position: relative;
  transition:
    background 160ms ease,
    border-color 160ms ease;
  width: 42px;
}

.themeToggle i::after {
  background: var(--panel);
  border-radius: 50%;
  box-shadow: 0 2px 7px var(--shadow);
  content: "";
  height: 18px;
  left: 1px;
  position: absolute;
  top: 1px;
  transition:
    background 160ms ease,
    transform 160ms ease;
  width: 18px;
}

.themeToggle input:checked + i {
  background: var(--accent);
  border-color: var(--accent);
}

.themeToggle input:checked + i::after {
  transform: translateX(20px);
}

.content {
  min-width: 0;
  padding: 22px;
}

.dashboard {
  display: grid;
  grid-gap: 18px;
  gap: 18px;
}

.dashboard h1 {
  margin: 0;
  font-size: 24px;
}

.dashboard p {
  color: var(--muted);
  margin: 0;
  max-width: 760px;
}

.calendarPage {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  min-height: calc(100vh - 44px);
}

.calendarHeader {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.calendarHeader h1 {
  font-size: 24px;
  line-height: 1.1;
  margin: 0 0 6px;
}

.calendarHeader p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

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

.calendarNav,
.calendarViewSwitch {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: inline-flex;
  overflow: hidden;
}

.calendarNav button,
.calendarViewSwitch button {
  align-items: center;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  height: 34px;
  justify-content: center;
  min-width: 36px;
  padding: 0 11px;
  text-transform: capitalize;
}

.calendarNav button:last-child,
.calendarViewSwitch button:last-child {
  border-right: 0;
}

.calendarNav button:hover,
.calendarViewSwitch button:hover,
.calendarViewSwitch button.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.calendarSummary {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 14px;
}

.calendarSummary strong {
  font-size: 15px;
}

.calendarSummaryTitle {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.calendarMonthControls {
  align-items: center;
  background: color-mix(in srgb, var(--control) 78%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 7px;
  display: inline-flex;
  overflow: hidden;
}

.calendarMonthControls button,
.calendarMonthControls select {
  align-items: center;
  background: transparent;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--ink-soft);
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  height: 30px;
  justify-content: center;
}

.calendarMonthControls button {
  cursor: pointer;
  min-width: 30px;
  padding: 0 8px;
}

.calendarMonthControls select {
  cursor: pointer;
  max-width: 130px;
  padding: 0 24px 0 8px;
}

.calendarMonthControls > :last-child {
  border-right: 0;
}

.calendarMonthControls button:hover,
.calendarMonthControls select:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.calendarSummary span {
  color: var(--muted);
  font-size: 13px;
}

.calendarTouchFilter {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  min-width: 0;
}

.calendarTouchFilter span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.calendarTouchFilter select {
  background: color-mix(in srgb, var(--control) 78%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  min-height: 30px;
  min-width: 190px;
  padding: 6px 10px;
}

.calendarCreateForm {
  align-items: end;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  border-radius: 8px;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  grid-template-columns: 170px minmax(150px, 1.2fr) minmax(120px, 0.7fr) minmax(170px, 1fr) auto;
  padding: 7px;
}

.calendarCreateField {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
}

.calendarCreateField > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1;
}

.calendarCreateField i {
  color: color-mix(in srgb, var(--danger) 88%, var(--ink));
  font-style: normal;
  font-weight: 700;
  margin-left: 2px;
}

.calendarCreateForm input {
  background: color-mix(in srgb, var(--control) 72%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  min-height: 38px;
  min-width: 0;
  padding: 8px 10px;
}

.calendarCreateForm input:disabled {
  color: var(--muted);
  cursor: default;
}

.calendarCreateForm button {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 12px;
}

.calendarCreateForm button:disabled {
  cursor: default;
  opacity: 0.55;
}

.calendarCreateForm span {
  color: var(--danger);
  font-size: 13px;
}

.calendarGrid {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--line) 46%, transparent);
  border-radius: 8px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-height: 620px;
  overflow: hidden;
  padding: 4px;
}

.calendarGridMonth {
  grid-template-columns: repeat(7, minmax(118px, 1fr));
}

.calendarSplit {
  align-items: start;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
  border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow) 28%, transparent);
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 2.2fr);
  min-height: 0;
  overflow: hidden;
  padding: 12px;
}

.calendarMonthPanel {
  align-content: start;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  min-width: 0;
}

.calendarSplit .calendarGridMonth {
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  gap: 4px;
  grid-template-columns: repeat(7, minmax(34px, 1fr));
  height: 410px;
  min-height: 0;
  padding: 0;
}

.calendarMonthPanel .calendarCreateForm {
  grid-template-columns: 1fr;
  padding: 7px;
}

.calendarMonthPanel .calendarCreateForm input,
.calendarMonthPanel .calendarCreateForm button {
  width: 100%;
}

.calendarGridWeek {
  grid-template-columns: repeat(7, minmax(132px, 1fr));
}

.calendarGridDay {
  grid-template-columns: 1fr;
}

.calendarDay {
  border: 1px solid color-mix(in srgb, var(--line) 42%, transparent);
  border-radius: 7px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 112px;
  min-width: 0;
  padding: 8px;
}

.calendarDayButton {
  background: var(--panel);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.calendarSplit .calendarDay {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
  border-radius: 7px;
  min-height: 58px;
  padding: 5px 4px;
}

.calendarSplit .calendarDay header {
  align-items: center;
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  justify-items: center;
  margin-bottom: 3px;
}

.calendarSplit .calendarDay header span {
  color: color-mix(in srgb, var(--muted) 74%, transparent);
  font-size: 8px;
  letter-spacing: 0;
}

.calendarSplit .calendarDay header strong {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.calendarSplit .calendarDayItems {
  align-items: center;
  display: flex;
  gap: 2px;
  justify-content: center;
  min-height: 8px;
  overflow: hidden;
}

.calendarSplit .calendarDayItems .calendarChip {
  border: 0;
  border-radius: 999px;
  display: block;
  height: 5px;
  overflow: hidden;
  padding: 0;
  width: 5px;
}

.calendarSplit .calendarDayItems .calendarChipReminder {
  background: color-mix(in srgb, var(--warn) 82%, #ffffff);
}

.calendarSplit .calendarDayItems .calendarChipEvent {
  background: color-mix(in srgb, var(--accent) 78%, #ffffff);
}

.calendarSplit .calendarDayItems .calendarChipOutreach {
  background: color-mix(in srgb, #8b5cf6 82%, #ffffff);
}

.calendarSplit .calendarDayItems .calendarChipOutreach.activeOutreach {
  background: color-mix(in srgb, #f59e0b 86%, #ffffff);
  box-shadow: 0 0 0 2px color-mix(in srgb, #f59e0b 24%, transparent);
}

.calendarSplit .calendarDayItems .calendarChip > *,
.calendarSplit .calendarDayItems .calendarChipTime {
  display: none;
}

.calendarDayButton:hover {
  background: var(--control);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

.calendarDay.selected {
  background: color-mix(in srgb, #8b5cf6 10%, var(--panel));
  border-color: color-mix(in srgb, #8b5cf6 48%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #8b5cf6 58%, transparent);
}

.calendarGridWeek .calendarDay,
.calendarGridDay .calendarDay {
  min-height: 560px;
}

.calendarDay.muted {
  background: var(--panel-subtle);
  color: var(--muted);
}

.calendarDay.today {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent);
}

.calendarDay.today.selected {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #8b5cf6 62%, transparent),
    inset 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.calendarDay header {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.calendarDay header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.calendarDay header strong {
  font-size: 17px;
}

.calendarDayItems {
  align-content: start;
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
}

.calendarChip {
  background: var(--control);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  color: var(--ink);
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
  padding: 6px 7px;
}

.calendarChipReminder {
  border-left-color: var(--warn);
}

.calendarChipEvent {
  border-left-color: var(--accent);
}

.calendarChipOutreach {
  border-left-color: #8b5cf6;
}

.calendarChipOutreach.activeOutreach {
  border-color: color-mix(in srgb, #f59e0b 48%, var(--line));
  border-left-color: #f59e0b;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f59e0b 18%, transparent);
}

.calendarChip div {
  align-items: center;
  display: flex;
  gap: 6px;
  min-width: 0;
}

.calendarChip strong {
  font-size: 12px;
  font-weight: 650;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendarChipTime {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 11px;
}

.calendarChip p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendarMore {
  color: var(--muted);
  font-size: 12px;
  padding: 2px 4px;
}

.calendarAgenda {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  overflow: hidden;
}

.calendarAgendaDay {
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  grid-template-columns: 150px minmax(0, 1fr);
  padding: 14px;
}

.calendarAgendaDay:last-child {
  border-bottom: 0;
}

.calendarAgendaDay h2 {
  display: grid;
  font-size: 14px;
  grid-gap: 4px;
  gap: 4px;
  margin: 0;
}

.calendarAgendaDay h2 span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.calendarAgendaDay > div {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.calendarEmpty {
  align-items: center;
  color: var(--muted);
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  justify-items: center;
  min-height: 220px;
  padding: 24px;
  text-align: center;
}

.calendarEmpty strong {
  color: var(--ink);
}

.calendarInspector {
  background: color-mix(in srgb, var(--panel) 92%, var(--control));
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--line) 56%, transparent);
  border-radius: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(650px, calc(100vh - 198px));
  min-width: 0;
  overflow: hidden;
}

.calendarInspector > header {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 5px 12px 10px;
}

.calendarInspector > header > div:first-child {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
}

.calendarInspector > header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.calendarInspector > header strong {
  font-size: 16px;
}

.calendarInspectorHeaderActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  min-width: 0;
}

.calendarInspectorCount {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.calendarTimeline {
  align-content: start;
  display: grid;
  grid-gap: 9px;
  gap: 9px;
  overflow-y: auto;
  padding: 10px 12px 12px;
}

.calendarTimelineItem {
  display: block;
}

.calendarTimelineRail {
  display: none;
}

.calendarTimelineRail::after {
  background: var(--line);
  bottom: -10px;
  content: "";
  position: absolute;
  top: 18px;
  width: 1px;
}

.calendarTimelineItem:last-child .calendarTimelineRail::after {
  display: none;
}

.calendarTimelineRail span {
  background: var(--accent);
  border: 3px solid var(--panel);
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--line);
  height: 13px;
  margin-top: 6px;
  width: 13px;
  z-index: 1;
}

.calendarTimelineCard {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--line) 64%, transparent);
  border-radius: 8px;
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
  padding: 10px 11px;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.calendarTimelineCard:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--shadow) 20%, transparent);
}

.calendarTimelineTopline {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.calendarTimelineTopline span,
.calendarTimelineCard small {
  color: var(--muted);
  font-size: 11px;
}

.calendarTimelineTopline b {
  background: color-mix(in srgb, var(--accent-soft) 78%, var(--panel));
  border-radius: 999px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  text-transform: capitalize;
}

.calendarTimelineCard strong {
  font-size: 14px;
  line-height: 1.25;
}

.calendarTimelineCard p {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.calendarTimelineOutreachLine {
  color: var(--ink-soft);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.calendarEmailDetails {
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 7px;
  overflow: hidden;
}

.calendarEmailDetails summary {
  align-items: center;
  background: color-mix(in srgb, var(--control) 72%, var(--panel));
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
  padding: 6px 8px;
}

.calendarEmailDetails summary::after {
  color: var(--muted);
  content: "show";
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.calendarEmailDetails[open] summary::after {
  content: "hide";
}

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

.calendarEmailSummaryHide,
.calendarEmailDetails[open] .calendarEmailSummaryShow {
  display: none;
}

.calendarEmailDetails[open] .calendarEmailSummaryHide {
  display: inline;
}

.calendarEmailPreview {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  padding: 5px 6px 6px;
}

.calendarEmailSubjectRow {
  align-items: end;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.calendarEmailSubjectRow label {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  min-width: 0;
}

.calendarEmailSubjectRow button,
.calendarEmailActions button,
.calendarEmailGmailButton {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  min-height: 28px;
  padding: 5px 9px;
}

.calendarEmailSubjectRow button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.calendarEmailBody {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  margin: 0;
}

.calendarEmailSubjectRow label > span,
.calendarEmailBody > span {
  color: var(--muted);
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.calendarEmailPreview > p strong {
  color: var(--ink);
  font-size: 13px;
}

.calendarEmailPreview input,
.calendarEmailPreview textarea {
  background: color-mix(in srgb, var(--control) 72%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  min-width: 0;
  padding: 5px 7px;
  width: 100%;
}

.calendarEmailPreview textarea {
  max-height: 216px;
  min-height: 132px;
  overflow: auto;
  resize: vertical;
}

.calendarEmailStyledBody,
.calendarEmailBody pre {
  background: color-mix(in srgb, var(--panel) 88%, var(--control));
  border: 1px solid color-mix(in srgb, var(--line) 54%, transparent);
  border-radius: 7px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  padding: 6px 7px;
  white-space: pre-wrap;
}

.calendarEmailStyledBody.editable {
  cursor: text;
  max-height: 216px;
  min-height: 96px;
  outline: none;
  overflow: auto;
}

.calendarEmailStyledBody.editable:focus {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}

.calendarEmailStyledBody p {
  margin: 0 0 8px;
}

.calendarEmailStyledBody p:last-child {
  margin-bottom: 0;
}

.calendarEmailStyledBody p.lead {
  color: var(--ink);
  font-weight: 700;
}

.calendarEmailStyledBody p.closing {
  font-style: italic;
}

.calendarEmailActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.calendarEmailSendButton {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.calendarEmailGmailButton {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.calendarEmailGmailButton:hover {
  background: color-mix(in srgb, #d93025 10%, var(--panel));
  border-color: color-mix(in srgb, #d93025 36%, var(--line));
  color: color-mix(in srgb, #d93025 72%, var(--ink));
}

.calendarEmailSendButton {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  isolation: isolate;
  overflow: visible;
  position: relative;
}

.calendarEmailSendIcon {
  flex: 0 0 auto;
  transform-origin: 50% 50%;
}

.calendarEmailSendButton.sent .calendarEmailSendIcon {
  animation: calendarPaperPlaneTakeoff 920ms cubic-bezier(0.2, 0.82, 0.22, 1) forwards;
  filter: drop-shadow(0 7px 12px color-mix(in srgb, var(--accent) 42%, transparent));
  position: relative;
  z-index: 3;
}

.calendarEmailActions button:disabled {
  cursor: default;
  opacity: 0.55;
}

.calendarEmailStatus,
.calendarEmailCelebration {
  color: var(--muted);
  font-size: 12px;
}

.calendarEmailCelebration {
  color: color-mix(in srgb, var(--success) 72%, var(--ink));
  font-weight: 800;
  opacity: 0;
  animation: calendarSuccessAppear 260ms ease 760ms forwards;
}

@keyframes calendarPaperPlaneTakeoff {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  34% {
    opacity: 1;
    transform: translate3d(18px, -24px, 0) rotate(-15deg) scale(1.06);
  }
  72% {
    opacity: 0.86;
    transform: translate3d(54px, -92px, 0) rotate(9deg) scale(0.92);
  }
  100% {
    opacity: 0;
    transform: translate3d(96px, -154px, 0) rotate(18deg) scale(0.76);
  }
}

@keyframes calendarSuccessAppear {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calendarEmailSendButton.sent .calendarEmailSendIcon,
  .calendarEmailCelebration,
  .calendarTimelineActions .calendarMarkDoneButton.celebrating,
  .calendarTimelineActions .calendarMarkDoneButton.celebrating svg {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.calendarTimelineActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: space-between;
  padding-top: 2px;
}

.calendarTimelineActionsLeft,
.calendarTimelineActionsRight {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.calendarTimelineActionsRight {
  margin-left: auto;
  justify-content: flex-end;
}

.calendarTimelineActions a,
.calendarTimelineActions button {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  min-height: 28px;
  padding: 5px 9px;
}

.calendarTimelineActions a:hover,
.calendarTimelineActions button:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.calendarTimelineActions .calendarEmailSendButton {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.calendarTimelineActions .calendarEmailSendButton:hover {
  background: color-mix(in srgb, var(--accent) 88%, #ffffff);
  border-color: var(--accent);
  color: white;
}

.calendarTimelineActions .calendarEmailGmailButton:hover {
  background: color-mix(in srgb, #d93025 10%, var(--panel));
  border-color: color-mix(in srgb, #d93025 36%, var(--line));
  color: color-mix(in srgb, #d93025 72%, var(--ink));
}

.calendarTimelineActions .calendarMarkDoneButton {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  min-width: 70px;
  transform-origin: 50% 50%;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.calendarTimelineActions .calendarMarkDoneButton:hover {
  transform: translateY(-1px) scale(1.03);
}

.calendarTimelineActions .calendarMarkDoneButton.celebrating {
  animation: calendarMarkDoneCelebration 900ms cubic-bezier(0.18, 0.9, 0.24, 1.22);
  background: color-mix(in srgb, var(--success) 16%, var(--panel));
  border-color: color-mix(in srgb, var(--success) 44%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 20%, transparent), 0 10px 24px color-mix(in srgb, var(--success) 14%, transparent);
  color: color-mix(in srgb, var(--success) 78%, var(--ink));
}

.calendarTimelineActions .calendarMarkDoneButton.celebrating svg {
  animation: calendarMarkDonePop 680ms ease 90ms both;
}

.calendarDoneNotice {
  animation: calendarSuccessAppear 220ms ease both;
  background: color-mix(in srgb, var(--success) 9%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--success) 24%, var(--line));
  border-radius: 7px;
  color: color-mix(in srgb, var(--success) 68%, var(--ink));
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 6px;
  padding: 6px 8px;
}

@keyframes calendarMarkDoneCelebration {
  0% {
    transform: scale(1);
  }
  28% {
    transform: scale(1.16) rotate(-1deg);
  }
  54% {
    transform: scale(0.98) rotate(1deg);
  }
  78% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes calendarMarkDonePop {
  0% {
    opacity: 0;
    transform: translateY(3px) rotate(-14deg) scale(0.72);
  }
  42% {
    opacity: 1;
    transform: translateY(-2px) rotate(8deg) scale(1.2);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

.calendarInspectorEmpty {
  align-content: center;
  color: var(--muted);
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  justify-items: center;
  padding: 24px;
  text-align: center;
}

.calendarInspectorEmpty strong {
  color: var(--ink);
}

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

.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.metric span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-bottom: 8px;
}

.metric strong {
  font-size: 24px;
}

.tableSurface {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  position: relative;
}

.tableHeader {
  align-items: flex-end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.tableHeader h1 {
  font-size: 22px;
  margin: 0 0 4px;
}

.tableHeader p {
  color: var(--muted);
  margin: 0;
}

.leadFieldGuide {
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  color: var(--ink-soft);
  padding-top: 2px;
}

.leadFieldGuide summary {
  align-items: baseline;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  gap: 10px;
  list-style: none;
  min-height: 28px;
  padding: 4px 2px;
}

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

.leadFieldGuide summary::before {
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--muted);
  border-top: 4px solid transparent;
  content: "";
  display: inline-block;
  height: 0;
  transform: translateY(1px);
  transition: transform 140ms ease;
  width: 0;
}

.leadFieldGuide[open] summary::before {
  transform: rotate(90deg) translateX(1px) translateY(1px);
}

.leadFieldGuide summary span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.leadFieldGuide summary strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.leadFieldGuideGrid {
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 8px;
  display: grid;
  margin-top: 6px;
  overflow: hidden;
}

.leadFieldGuideHeader,
.leadFieldGuideRow {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(120px, 0.8fr) minmax(260px, 2.4fr);
}

.leadFieldGuideHeader {
  background: color-mix(in srgb, var(--panel-muted) 66%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.leadFieldGuideHeader span,
.leadFieldGuideRow strong,
.leadFieldGuideRow span,
.leadFieldGuideRow p {
  border-right: 1px solid color-mix(in srgb, var(--line) 64%, transparent);
  margin: 0;
  padding: 8px 10px;
}

.leadFieldGuideHeader span:last-child,
.leadFieldGuideRow p {
  border-right: 0;
}

.leadFieldGuideRow {
  border-top: 1px solid color-mix(in srgb, var(--line) 64%, transparent);
  font-size: 12px;
}

.leadFieldGuideRow strong {
  color: var(--ink);
  font-weight: 650;
}

.leadFieldGuideRow span {
  color: var(--muted);
  font-weight: 600;
}

.leadFieldGuideRow p {
  color: var(--ink-soft);
  line-height: 1.35;
}

.toolbar {
  align-items: center;
  display: flex;
  gap: 8px;
  position: relative;
}

.toolbar button {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.toolbar button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.toolbar button:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.55;
}

.toolbar button:disabled:hover {
  border-color: var(--line);
  color: var(--muted);
}

.fontScaleButton span {
  align-items: baseline;
  display: inline-flex;
  font-weight: 700;
  line-height: 1;
}

.tableColorControl {
  position: relative;
}

.handoffBallControl {
  position: relative;
}

.handoffBallButton span {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 16px;
  line-height: 1;
}

.handoffBallPopover {
  align-items: stretch;
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  gap: 6px;
  left: 0;
  padding: 6px;
  position: absolute;
  top: calc(100% + 7px);
  z-index: 50;
}

.handoffBallGrid {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  grid-template-columns: repeat(4, 28px);
}

.handoffBallOption,
.handoffSoundToggle {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
}

.handoffBallOption {
  height: 28px;
  width: 28px;
}

.handoffBallOption span {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 16px;
  line-height: 1;
}

.handoffBallOption:hover,
.handoffBallOption.active,
.handoffSoundToggle:hover,
.handoffSoundToggle.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.handoffSoundToggle {
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  white-space: nowrap;
}

.handoffSoundToggle strong {
  font-size: 11px;
  font-weight: 700;
}

.toolbar .tableColorButton {
  background: var(--table-color);
  border-color: color-mix(in srgb, var(--table-color) 74%, var(--line));
  color: var(--table-color-text);
}

.toolbar .tableColorButton:hover {
  border-color: var(--table-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--table-color) 20%, transparent);
}

.tableColorPopover {
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px var(--shadow);
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 42px;
  width: 190px;
  z-index: 7;
}

.tableColorPopover label {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
}

.tableColorPopover input[type="color"] {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 30px;
  padding: 0;
  width: 42px;
}

.tableColorPresets {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  grid-template-columns: repeat(5, 1fr);
}

.tableColorPresets button {
  background: var(--table-color);
  border: 1px solid color-mix(in srgb, var(--table-color) 70%, var(--line));
  border-radius: 6px;
  cursor: pointer;
  height: 28px;
  min-width: 0;
  padding: 0;
  width: 100%;
}

.tableColorPresets button:hover,
.tableColorPresets button.active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--table-color) 18%, transparent);
}

.bulkActionBar {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  display: flex;
  flex: 0 1 auto;
  gap: 7px;
  height: 36px;
  justify-content: space-between;
  max-width: min(100%, 460px);
  min-width: 0;
  padding: 0 6px 0 10px;
}

.bulkActionBar > span {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 12px;
  white-space: nowrap;
}

.bulkActionBar > div {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 4px;
  justify-content: flex-end;
  min-width: 0;
}

.bulkActionBar button,
.bulkActionDialog footer button {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-sizing: border-box;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  gap: 4px;
  height: 24px;
  line-height: 1;
  min-width: 0;
  padding: 0 7px;
  white-space: nowrap;
  width: auto;
}

.bulkActionBar button svg {
  flex: 0 0 auto;
}

.bulkActionBar button:hover,
.bulkActionDialog footer button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.bulkActionBar button.danger,
.bulkActionDialog footer button.danger {
  background: color-mix(in srgb, var(--danger-soft) 62%, var(--danger) 38%);
  border-color: color-mix(in srgb, var(--danger-line) 45%, var(--danger) 55%);
  color: color-mix(in srgb, var(--danger) 82%, #111827 18%);
  font-weight: 700;
}

.bulkActionBar button.danger {
  min-width: 42px;
  padding: 0 7px;
}

.bulkActionBar .clearSelectionButton {
  flex: 0 0 24px;
  justify-content: center;
  min-width: 24px;
  padding: 0;
  width: 24px;
}

.tableInlineNotice {
  align-items: center;
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent-line) 58%, transparent);
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 650;
  height: 28px;
  padding: 0 10px;
  white-space: nowrap;
}

.bulkActionDialog {
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 22px 54px var(--shadow-strong);
  color: var(--ink);
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  padding: 16px;
  width: min(420px, 100%);
}

.bulkActionDialog header,
.bulkActionDialog footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.bulkActionDialog header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.bulkActionDialog h2 {
  font-size: 18px;
  margin: 2px 0 0;
}

.bulkActionDialog p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.bulkActionDialog header button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  padding: 0;
  width: 30px;
}

.bulkActionDialog footer {
  gap: 8px;
  justify-content: flex-end;
}

.searchBox {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
  width: 250px;
}

.searchBox:focus-within,
.searchBox.active {
  background: var(--panel-raised);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.searchBox input {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 450;
  min-width: 0;
  outline: 0;
  transition:
    color 160ms ease,
    font-size 160ms ease,
    font-weight 160ms ease;
  width: 100%;
}

.searchBox:focus-within input,
.searchBox.active input {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.searchBox input::placeholder {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.gridFrame {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  height: calc(100vh - 182px);
  min-height: 480px;
  overflow: hidden;
  position: relative;
}

.columnStyleToggles {
  align-items: center;
  background: color-mix(in srgb, var(--panel-raised) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--shadow) 60%, transparent);
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}

.columnStyleToggles button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  height: 22px;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  width: 22px;
}

.columnStyleToggles button:hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  color: var(--ink);
}

.columnStyleToggles button.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  color: var(--accent);
}

.columnWeightButton span {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.columnWeightButton.medium span {
  font-weight: 600;
}

.columnWeightButton.super span {
  font-weight: 800;
}

.columnStyleToggles button.super {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.relatedTableTooltip {
  background: var(--tooltip-bg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  box-shadow: 0 12px 28px var(--shadow);
  color: var(--tooltip-text);
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  max-width: 260px;
  padding: 8px 10px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 6;
}

.relatedTableTooltipBelow {
  transform: translateX(-50%);
  margin-top: 0;
}

.relatedTableTooltip strong {
  font-size: var(--table-tooltip-font-size, 11px);
  line-height: 1.2;
}

.relatedTableTooltip span {
  color: var(--tooltip-muted);
  font-size: var(--table-tooltip-font-size, 11px);
  line-height: 1.35;
}

.documentCellTooltip {
  max-width: 300px;
}

.calendarCellTooltip {
  max-width: 320px;
}

.documentCellTooltip strong,
.documentCellTooltip span,
.calendarCellTooltip span {
  overflow-wrap: anywhere;
}

.columnDropdown {
  align-self: flex-end;
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px var(--shadow);
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  justify-self: end;
  max-height: 360px;
  overflow: auto;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(320px, 100%);
  z-index: 12;
}

.columnDropdownHeader {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  padding: 4px;
}

.columnDropdownHeader button {
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  height: 28px;
  padding: 0 10px;
}

.columnDropdownHeader button:hover {
  border-color: var(--accent);
}

.columnMenuItem {
  align-items: center;
  border-radius: 6px;
  color: var(--ink-soft);
  cursor: pointer;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  min-height: 34px;
  padding: 4px 8px;
}

.columnMenuItem:hover {
  background: var(--control-hover);
}

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

.columnMenuItem span {
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.columnMenuItem svg {
  color: var(--accent);
}

.dvn-underlay {
  background: var(--panel);
}

.dvn-scroller {
  scrollbar-width: thin;
}

.gdg {
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tableNotice {
  border-radius: 8px;
  font-size: 13px;
  padding: 9px 12px;
}

.tableNotice.error {
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  color: var(--danger);
}

.tableNotice.success {
  background: color-mix(in srgb, var(--success) 11%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--success) 34%, var(--line));
  color: color-mix(in srgb, var(--success) 72%, var(--ink));
}

.uploadProgressNotice {
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  color: var(--ink);
  display: grid;
  grid-gap: 7px;
  gap: 7px;
}

.uploadProgressNotice > div:first-child {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.uploadProgressNotice strong,
.uploadProgressNotice span {
  font-size: calc(12px * var(--table-font-scale, 1));
}

.uploadProgressNotice span {
  color: var(--muted);
  font-weight: 700;
}

.uploadProgressTrack {
  background: color-mix(in srgb, var(--line) 66%, transparent);
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}

.uploadProgressTrack span {
  background: var(--accent);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 180ms ease;
}

.documentModalBackdrop {
  align-items: center;
  background: var(--backdrop);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 20;
}

.documentPreviewBackdrop {
  z-index: 28;
}

.documentModal {
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 22px 54px var(--shadow-strong);
  color: var(--ink);
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  padding: 16px;
  width: min(720px, 100%);
}

.recordCreateForm {
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(620px, 100%);
}

.recordCreateForm header,
.recordCreateForm footer,
.recordCreateForm .documentUploadError,
.recordCreateForm .formField.wide {
  grid-column: 1 / -1;
}

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

.documentModal header span {
  background: var(--tag-bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 7px;
  padding: 3px 6px;
}

.documentModal h2 {
  font-size: 17px;
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
}

.documentModal header button {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
  width: 32px;
}

.documentModal header button:hover {
  background: var(--control-hover);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  color: var(--accent);
}

.documentModal p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.detailsFloatingButton {
  animation: detailsButtonIn 160ms ease-out;
  background: color-mix(in srgb, var(--control) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 6px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--shadow) 36%, transparent);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  min-height: 28px;
  opacity: 0.72;
  padding: 5px 10px;
  position: absolute;
  right: 12px;
  top: 12px;
  transform: translateY(0) scale(0.98);
  transition:
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    opacity 150ms ease,
    transform 150ms ease;
  z-index: 6;
}

.detailsFloatingButton.positioned {
  left: var(--details-button-left);
  right: auto;
  top: var(--details-button-top);
}

.detailsFloatingButton:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--shadow) 48%, transparent);
  color: var(--accent);
  opacity: 1;
  transform: translateY(-1px) scale(1);
}

.clientPickerPopover {
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 42px var(--shadow-strong);
  color: var(--ink);
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  padding: 10px;
  position: absolute;
  width: min(330px, calc(100% - 16px));
  z-index: 8;
}

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

.clientPickerPopover header strong {
  font-size: 13px;
}

.clientPickerPopover header button {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.clientPickerPopover input {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  min-height: 30px;
  min-width: 0;
  padding: 6px 8px;
}

.clientPickerList {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  max-height: 230px;
  overflow: auto;
}

.clientPickerList button {
  background: var(--control);
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 7px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  padding: 7px 8px;
  text-align: left;
}

.clientPickerList button:hover {
  background: var(--panel);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

.clientPickerList button:disabled {
  cursor: default;
  opacity: 0.55;
}

.clientPickerList span,
.clientPickerList small,
.clientPickerError {
  color: var(--muted);
  font-size: 11px;
}

.clientPickerList strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clientPickerError {
  color: var(--danger);
  margin: 0;
}

@keyframes detailsButtonIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.94);
  }
  to {
    opacity: 0.68;
    transform: translateY(0) scale(0.98);
  }
}

@keyframes mobile-row-focus {
  0% {
    background: color-mix(in srgb, var(--accent-soft) 72%, var(--panel));
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
  }
  100% {
    background: var(--panel);
    border-color: var(--line);
    box-shadow: 0 0 0 0 transparent;
  }
}

.tableSurface {
  --table-font-scale: 1;
}

.detailsDrawerBackdrop {
  align-items: center;
  background: color-mix(in srgb, var(--backdrop) 58%, transparent);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 22;
}

.detailsDrawer {
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 22px 54px var(--shadow-strong);
  color: var(--ink);
  font-size: calc(13px * var(--table-font-scale, 1));
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(950px, calc(100vh - 36px));
  max-width: min(1500px, calc(100vw - 36px));
  padding: 16px;
  width: 1430px;
}

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

.detailsDrawer header span {
  background: var(--tag-bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  display: inline-flex;
  font-size: calc(10px * var(--table-font-scale, 1));
  font-weight: 700;
  margin-bottom: 7px;
  padding: 3px 6px;
}

.detailsDrawer h2,
.detailsDrawer p {
  margin: 0;
}

.detailsDrawer h2 {
  font-size: calc(17px * var(--table-font-scale, 1));
  line-height: 1.2;
}

.detailsDrawer p {
  color: var(--muted);
  font-size: calc(13px * var(--table-font-scale, 1));
}

.detailsDrawer header button {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.detailsDrawerTabs {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 6px;
  padding-bottom: 8px;
}

.detailsDrawerTabs button {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: calc(12px * var(--table-font-scale, 1));
  font-weight: 800;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
}

.detailsDrawerTabs button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.detailsDrawerTabs button span {
  align-items: center;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 999px;
  display: inline-flex;
  font-size: calc(10px * var(--table-font-scale, 1));
  justify-content: center;
  min-width: 18px;
  padding: 1px 5px;
}

.detailsDrawerBody {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  min-height: 0;
  overflow: hidden;
}

.detailsDrawerBody.single {
  grid-template-columns: 1fr;
}

.detailsDrawerBody.lead {
  grid-template-columns: minmax(360px, 0.4fr) minmax(560px, 0.6fr);
}

.detailsDrawerBody.coldTarget {
  grid-template-columns: minmax(320px, 0.4fr) minmax(520px, 0.6fr);
}

.detailsDrawerFieldsPanel {
  display: grid;
  min-height: 0;
  overflow: hidden;
}

.detailsDrawerFieldsPanel > summary {
  display: none;
}

.detailsDrawerFields {
  align-content: start;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: auto;
  padding-right: 2px;
}

.detailsDrawerFields label,
.detailsDrawerField {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
}

.detailsDrawerFields label.wide {
  grid-column: 1 / -1;
}

.detailsDrawerFields span,
.detailsDrawerField span,
.detailsDrawerSection > span,
.detailsDrawerDetails summary {
  color: var(--muted);
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
}

.detailsDrawerFields input,
.detailsDrawerFields select,
.detailsDrawerFields textarea,
.detailsDrawerField strong {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: calc(13px * var(--table-font-scale, 1));
  min-width: 0;
  padding: 8px 9px;
}

.detailsDrawerField strong {
  font-weight: 650;
  line-height: 1.35;
  min-height: 36px;
  overflow-wrap: anywhere;
}

.detailsDrawerFields select {
  cursor: pointer;
}

.detailsDrawerFields textarea {
  line-height: 1.35;
  min-height: 0;
  overflow-wrap: anywhere;
  resize: vertical;
  white-space: pre-wrap;
}

.detailsSecondaryFields {
  background: color-mix(in srgb, var(--control) 68%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 8px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 8px;
}

.detailsSecondaryFields header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.detailsSecondaryFields header span {
  color: color-mix(in srgb, var(--muted) 86%, var(--ink));
  font-size: calc(10.5px * var(--table-font-scale, 1));
  font-weight: 700;
}

.detailsSecondaryFields header small {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  font-size: calc(10px * var(--table-font-scale, 1));
  font-weight: 650;
}

.detailsSecondaryFields > div {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detailsSecondaryField {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
}

.detailsSecondaryField strong {
  background: color-mix(in srgb, var(--control) 82%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 6px;
  color: color-mix(in srgb, var(--ink-soft) 82%, var(--muted));
  font-size: calc(12px * var(--table-font-scale, 1));
  font-weight: 560;
  line-height: 1.3;
  min-height: 32px;
  overflow-wrap: anywhere;
  padding: 7px 8px;
}

.detailsClientSection {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  position: relative;
}

.detailsClientSection > header {
  align-items: end;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.8fr);
}

.detailsClientSection > header div {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
}

.detailsClientSection > header span {
  color: var(--muted);
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
}

.detailsClientSection > header strong {
  color: var(--ink);
  font-size: calc(13px * var(--table-font-scale, 1));
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}

.detailsClientPicker {
  align-items: stretch;
  display: grid;
  grid-gap: 0;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) 34px;
  min-width: 0;
  position: relative;
}

.detailsClientPicker input {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detailsClientPicker > button {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 0;
}

.detailsClientPicker > button:hover,
.detailsClientPicker > button:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.detailsClientOptions {
  background: color-mix(in srgb, var(--control) 82%, var(--panel));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  left: 0;
  margin-top: 4px;
  max-height: 168px;
  overflow: auto;
  padding: 6px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 50;
}

.detailsClientOptions button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  min-width: 0;
  padding: 6px 7px;
  text-align: left;
}

.detailsClientOptions button:hover,
.detailsClientOptions button:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  outline: none;
}

.detailsClientOptions span {
  color: var(--muted);
  font-size: calc(10px * var(--table-font-scale, 1));
  font-weight: 700;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailsClientOptions strong {
  color: var(--ink);
  font-size: calc(12px * var(--table-font-scale, 1));
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.detailsClientOptions small,
.detailsClientOptions p {
  color: var(--ink-soft);
  font-size: calc(11px * var(--table-font-scale, 1));
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
}

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

.detailsFieldLabel {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.detailsFieldLabel i {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: calc(9px * var(--table-font-scale, 1));
  font-style: normal;
  height: 15px;
  justify-content: center;
  line-height: 1;
  width: 15px;
}

.detailsHandoffField {
  align-content: start;
}

.detailsHandoffControl {
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  font: inherit;
  grid-gap: 8px;
  gap: 8px;
  grid-template-columns: 28px minmax(82px, 1fr) 42px;
  min-height: 36px;
  overflow: visible;
  padding: 6px 8px;
}

.detailsHandoffControl:hover,
.detailsHandoffControl:focus-visible {
  border-color: var(--accent-line);
  outline: none;
}

.detailsHandoffSide {
  color: var(--muted);
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
  text-align: center;
}

.detailsHandoffControl.us .detailsHandoffSide:first-child,
.detailsHandoffControl.client .detailsHandoffSide:last-child {
  color: var(--ink);
}

.detailsHandoffTrack {
  align-items: center;
  display: block;
  height: 22px;
  position: relative;
}

.detailsHandoffTrack b {
  display: inline-flex;
  font-size: calc(18px * var(--table-font-scale, 1));
  left: var(--details-ball-x, 0%);
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, calc(-50% + var(--details-ball-y, 0px)));
  transition:
    left 80ms linear,
    transform 80ms linear;
}

.detailsHandoffControl.animating .detailsHandoffTrack b {
  filter: drop-shadow(0 5px 6px color-mix(in srgb, var(--ink) 22%, transparent));
}

.detailsDrawerSections {
  align-content: start;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.detailsDrawerSection,
.detailsDrawerDetails {
  background: color-mix(in srgb, var(--control) 74%, var(--panel));
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  padding: 9px;
}

.detailsDrawerSection.offer {
  background: color-mix(in srgb, var(--accent) 8%, var(--control));
  gap: 4px;
  padding: 6px 8px;
}

.detailsDrawerSection.outreach {
  background: color-mix(in srgb, var(--accent) 8%, var(--control));
}

.detailsDrawerSectionHeader {
  align-items: start;
  cursor: pointer;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  grid-template-columns: 12px minmax(0, 1fr) minmax(250px, 0.72fr);
  justify-content: space-between;
}

.detailsDrawerSectionHeader::-webkit-details-marker {
  display: none;
}

.detailsDrawerSectionHeader div {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  min-width: 0;
}

.detailsDrawerToggle {
  border-bottom: 4px solid transparent;
  border-left: 5px solid color-mix(in srgb, var(--ink) 64%, var(--muted));
  border-top: 4px solid transparent;
  display: inline-block;
  height: 0;
  margin-top: 6px;
  transition: transform 150ms ease, border-left-color 150ms ease;
  width: 0;
}

.detailsDrawerSection[open] > .detailsDrawerSectionHeader .detailsDrawerToggle {
  transform: rotate(90deg);
}

.detailsDrawerSectionHeader:hover .detailsDrawerToggle {
  border-left-color: var(--accent);
}

.detailsDrawerSectionHeader span {
  color: var(--muted);
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
}

.detailsDrawerSectionHeader span {
  align-items: baseline;
  display: inline-flex;
  gap: 6px;
}

.detailsDrawerSectionHeader .detailsDrawerToggle {
  display: inline-block;
}

.detailsDrawerSectionHeader strong {
  color: var(--ink);
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
}

.detailsDrawerSectionHeader .detailsOfferActions {
  align-self: start;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  grid-column: 3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  min-width: 0;
}

.detailsOfferSummaryPreview {
  color: var(--ink-soft);
  display: -webkit-box;
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 500;
  line-height: 1.25;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.detailsDrawerSectionHeader button,
.detailsDrawerDetails button {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: calc(12px * var(--table-font-scale, 1));
  font-weight: 700;
  min-height: 28px;
  padding: 5px 10px;
}

.detailsDrawerSectionHeader button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.detailsOfferMissingEditor {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  align-items: start;
}

.detailsOfferMissingEditor section {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.detailsOfferMissingEditor section > span {
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
}

.detailsOfferMissingEditor label {
  align-items: center;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  grid-template-columns: 128px minmax(0, 1fr);
}

.detailsOfferMissingEditor label > span {
  color: var(--muted);
  font-size: calc(12px * var(--table-font-scale, 1));
  font-weight: 600;
}

.detailsOfferMissingEditor input,
.detailsOfferMissingEditor select {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: calc(12px * var(--table-font-scale, 1));
  min-width: 0;
  padding: 4px 7px;
}

.detailsOfferMissingEditor select {
  cursor: pointer;
}

.detailsOfferMissingEditor small {
  color: var(--ink-soft);
  font-size: calc(10px * var(--table-font-scale, 1));
  grid-column: 2;
  line-height: 1.2;
}

.detailsOfferCalculatedPanel {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.detailsOfferCalculatedCard {
  background: color-mix(in srgb, var(--panel-strong, var(--panel)) 74%, var(--line));
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 8px;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  padding: 9px;
}

.detailsOfferCalculatedList {
  display: grid;
  grid-gap: 4px 10px;
  gap: 4px 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.detailsOfferCalculatedList > div {
  align-items: baseline;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
}

.detailsOfferCalculatedList dt,
.detailsOfferPaymentPlan > span,
.detailsOfferTotalGross span {
  color: var(--muted);
  font-size: calc(10px * var(--table-font-scale, 1));
  font-weight: 700;
  line-height: 1.15;
}

.detailsOfferCalculatedList dd {
  color: var(--ink);
  font-size: calc(12px * var(--table-font-scale, 1));
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailsOfferTotalGross {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 7px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
}

.detailsOfferTotalGross strong {
  color: var(--accent);
  font-size: calc(17px * var(--table-font-scale, 1));
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.detailsOfferPaymentPlan {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 7px;
}

.detailsOfferPaymentPlan > span {
  grid-column: 1 / -1;
}

.detailsOfferPaymentPlan div {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  min-width: 0;
}

.detailsOfferPaymentPlan strong {
  color: var(--muted);
  font-size: calc(10px * var(--table-font-scale, 1));
  line-height: 1.1;
}

.detailsOfferPaymentPlan em {
  color: var(--ink);
  font-size: calc(12px * var(--table-font-scale, 1));
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailsOutreachPanel {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.detailsOutreachPanel label {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.detailsOutreachPanel label > span,
.detailsOutreachCurrent span {
  color: var(--muted);
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
}

.detailsOutreachPanel select {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: calc(13px * var(--table-font-scale, 1));
  min-width: 0;
  padding: 6px 8px;
}

.detailsOutreachPanel p {
  color: var(--ink-soft);
  font-size: calc(13px * var(--table-font-scale, 1));
  line-height: 1.25;
  margin: 0;
}

.detailsOutreachPanel ol {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.detailsOutreachPanel li {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  min-width: 0;
  padding: 5px 6px;
}

.detailsOutreachPanel li span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}

.detailsOutreachPanel li strong {
  color: var(--ink);
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailsOutreachPanel li small {
  color: var(--muted);
  font-size: 10px;
}

.detailsOutreachTouches {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.detailsOutreachTouch {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 0;
}

.detailsOutreachTouch summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  list-style: none;
  min-width: 0;
  padding: 5px 6px;
}

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

.detailsOutreachTouchTitle {
  align-items: baseline;
  display: inline-flex;
  gap: 7px;
  min-width: 0;
}

.detailsOutreachTouchTitle span {
  color: var(--accent);
  flex: 0 0 auto;
  font-size: calc(13px * var(--table-font-scale, 1));
  font-weight: 800;
}

.detailsOutreachTouchTitle strong {
  color: var(--ink);
  font-size: calc(13px * var(--table-font-scale, 1));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailsOutreachTouch summary small {
  color: var(--muted);
  font-size: calc(11px * var(--table-font-scale, 1));
}

.detailsOutreachDraft {
  border-top: 1px solid var(--line);
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  padding: 6px;
}

.detailsOutreachDraftHeader {
  align-items: start;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.detailsOutreachDraftStatus {
  color: var(--accent);
  font-weight: 700;
}

.detailsOutreachDraft label {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.detailsOutreachDraft input,
.detailsOutreachDraft textarea {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: calc(13px * var(--table-font-scale, 1));
  line-height: 1.35;
  min-width: 0;
  padding: 8px 9px;
}

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

.detailsOutreachDraft textarea {
  max-height: calc(13px * var(--table-font-scale, 1) * 18);
  min-height: calc(13px * var(--table-font-scale, 1) * 12);
  overflow: auto;
  resize: vertical;
}

.detailsOutreachDraft button {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: calc(12px * var(--table-font-scale, 1));
  font-weight: 700;
  padding: 6px 9px;
}

.detailsOutreachDraftHeader button {
  min-height: 28px;
  padding: 5px 9px;
  white-space: nowrap;
}

.detailsOutreachDraftHeader button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 12%, var(--control));
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  color: var(--accent);
}

.detailsOutreachEmailPreview {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  display: grid;
  font-size: calc(13px * var(--table-font-scale, 1));
  grid-gap: 8px;
  gap: 8px;
  line-height: 1.42;
  max-height: calc(13px * var(--table-font-scale, 1) * 18);
  min-height: 188px;
  overflow: auto;
  padding: 9px 10px;
  white-space: pre-wrap;
}

.detailsOutreachEmailPreview.editable {
  cursor: text;
  outline: none;
}

.detailsOutreachEmailPreview.editable:focus {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}

.detailsOutreachEmailPreview p {
  color: var(--ink);
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}

.detailsOutreachEmailPreview p.lead {
  font-weight: 650;
}

.detailsOutreachEmailPreview p.closing {
  color: color-mix(in srgb, var(--ink) 84%, var(--accent));
  font-style: italic;
}

.detailsOutreachDraft button:hover {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
}

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

.detailsOutreachCurrent {
  background: color-mix(in srgb, var(--panel) 74%, var(--accent));
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  padding: 6px 8px;
}

.detailsOutreachCurrent strong {
  color: var(--ink);
  font-size: 12px;
}

.detailsOutreachWorkflow {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  padding: 7px;
}

.detailsOutreachWorkflow button,
.detailsOutreachWorkflow select {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  min-width: 0;
  padding: 6px 8px;
}

.detailsOutreachWorkflow button {
  cursor: pointer;
  font-weight: 700;
}

.detailsOutreachWorkflow button:hover,
.detailsOutreachWorkflow select:focus {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
}

.detailsOutreachWorkflow button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.detailsOutreachActions {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  grid-template-columns: 1fr;
}

.detailsOutreachActions button {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
}

.detailsOutreachActions button.primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}

.detailsOutreachActions button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.detailsDrawerError {
  color: #b42318;
  font-size: 11px;
  margin: 0;
}

.detailsDrawerSummary {
  color: var(--ink);
  display: -webkit-box;
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.detailsDownloadsSection,
.detailsSummarySection {
  gap: 6px;
}

.detailsDownloadsHeader {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.downloadsHeaderActions {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  justify-content: flex-end;
  min-width: 132px;
}

.downloadsUploadInlineStatus {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 9%, var(--control));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 999px;
  color: var(--ink-soft);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: calc(10px * var(--table-font-scale, 1));
  font-weight: 800;
  gap: 4px;
  height: 24px;
  padding: 0 7px;
}

.downloadsUploadInlineDot {
  animation: uploadPulse 900ms ease-in-out infinite;
  background: var(--accent);
  border-radius: 999px;
  height: 6px;
  width: 6px;
}

@keyframes uploadPulse {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.86);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.downloadsUploadButton {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: calc(10px * var(--table-font-scale, 1));
  font-weight: 700;
  gap: 4px;
  min-height: 24px;
  padding: 3px 7px;
}

.downloadsUploadButton:hover {
  background: var(--panel);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--accent);
}

.detailsSummaryDetails {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.detailsSummaryDetails summary {
  color: inherit;
}

.detailsSummaryDetails summary p {
  color: var(--ink);
  margin: 0;
}

.detailsExtraDownloads,
.mobileLeadExtraDownloads {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
}

.detailsExtraDownloads summary,
.mobileLeadExtraDownloads summary {
  align-items: center;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
  gap: 7px;
  justify-self: start;
  list-style: none;
}

.detailsExtraDownloads summary::-webkit-details-marker,
.mobileLeadExtraDownloads summary::-webkit-details-marker {
  display: none;
}

.detailsExtraDownloads summary i,
.mobileLeadExtraDownloads summary i {
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  display: inline-block;
  height: 0;
  transition: transform 160ms ease;
  width: 0;
}

.detailsExtraDownloads[open] summary i,
.mobileLeadExtraDownloads[open] summary i {
  transform: rotate(90deg);
}

.detailsDrawerDetails {
  margin: 0;
}

.detailsDrawerDetails summary {
  cursor: pointer;
  list-style: none;
}

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

.detailsDrawerDetails p {
  color: var(--ink-soft);
  font-size: calc(12px * var(--table-font-scale, 1));
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.detailsDrawerTimeline {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.detailsDrawerTimeline li {
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 7px;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  padding: 7px;
}

.detailsDrawerTimeline time {
  color: var(--muted);
  font-size: calc(10.5px * var(--table-font-scale, 1));
  font-weight: 700;
}

.detailsDrawerTimeline strong {
  color: var(--ink);
  font-size: calc(12px * var(--table-font-scale, 1));
  line-height: 1.25;
}

.detailsDrawerTimeline span {
  color: var(--muted);
  font-size: calc(10.5px * var(--table-font-scale, 1));
}

.detailsDrawerEmpty {
  background: var(--control);
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: calc(13px * var(--table-font-scale, 1));
  margin: 0;
  padding: 12px;
}

.detailsDrawerEmpty.compact {
  font-size: calc(12px * var(--table-font-scale, 1));
  padding: 8px;
}

.leadDocumentCardList {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.leadDocumentCard {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  grid-template-columns: 24px minmax(82px, 0.75fr) minmax(0, 1fr);
  min-height: 36px;
  min-width: 0;
  padding: 5px 7px;
  text-align: left;
}

.leadDocumentCard:hover {
  background: var(--panel);
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
}

.leadDocumentCardBadge {
  align-items: center;
  background: var(--document-color, #475467);
  border-radius: 5px;
  color: #fff;
  display: inline-flex;
  font-size: calc(8px * var(--table-font-scale, 1));
  font-weight: 800;
  height: 20px;
  justify-content: center;
  text-transform: uppercase;
  width: 20px;
}

.leadDocumentCardMain {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  min-width: 0;
}

.leadDocumentCardMain strong {
  color: var(--ink);
  font-size: calc(12px * var(--table-font-scale, 1));
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leadDocumentCardMain span,
.leadDocumentCardMain em,
.leadDocumentCardSummary {
  color: var(--muted);
  font-size: calc(10px * var(--table-font-scale, 1));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leadDocumentCardMain em {
  font-style: normal;
}

.leadDocumentCardSummary {
  font-size: calc(11px * var(--table-font-scale, 1));
}

.detailsDocumentCard {
  align-items: start;
  gap: 5px;
  grid-template-columns: 18px minmax(74px, 0.22fr) minmax(0, 1fr);
  min-height: 64px;
  padding: 6px 8px;
}

.detailsDocumentCard .leadDocumentCardBadge {
  border-radius: 4px;
  font-size: calc(6px * var(--table-font-scale, 1));
  height: 14px;
  margin-top: 2px;
  width: 14px;
}

.detailsDocumentCard .leadDocumentCardMain strong {
  font-size: calc(11px * var(--table-font-scale, 1));
}

.detailsDocumentCard .leadDocumentCardMain span {
  font-size: calc(9px * var(--table-font-scale, 1));
  line-height: 1.15;
  white-space: normal;
}

.detailsDocumentCard .leadDocumentCardMain {
  gap: 0;
}

.detailsDocumentCardText {
  color: var(--ink-soft);
  display: grid;
  font-size: calc(11px * var(--table-font-scale, 1));
  grid-gap: 2px;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}

.detailsDocumentCardText small {
  color: var(--muted);
  font-size: calc(9px * var(--table-font-scale, 1));
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailsDocumentCardSummary {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-height: calc(1.25em * 3);
  overflow: hidden;
  white-space: normal;
}

.detailsDrawer footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.detailsDrawer footer button {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  min-height: 34px;
  padding: 7px 11px;
}

.detailsDrawer footer button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.detailsDrawer footer button:disabled {
  cursor: default;
  opacity: 0.55;
}

.longTextModal {
  width: min(780px, 100%);
}

.longTextModal p {
  color: var(--ink-soft);
  white-space: pre-wrap;
}

.documentPreviewFrame {
  background: var(--file-surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 420px;
  overflow: hidden;
}

.documentPreviewFrame iframe,
.documentPreviewFrame img {
  border: 0;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.documentPreviewEmpty {
  align-items: center;
  background: var(--file-surface);
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  min-height: 180px;
  justify-content: center;
}

.documentPreviewSummaries {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.documentPreviewSummaries section {
  background: var(--file-surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  padding: 8px 10px;
}

.documentPreviewSummaries strong {
  color: var(--muted);
  font-size: calc(11px * var(--table-font-scale, 1));
}

.documentPreviewSummaries p {
  color: var(--ink-soft);
  font-size: calc(13px * var(--table-font-scale, 1));
  line-height: 1.4;
  margin: 0;
  white-space: pre-wrap;
}

.documentModal footer {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.documentPreviewActions {
  align-items: center;
  justify-content: space-between;
}

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

.documentModal footer a,
.documentModal footer button {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  min-width: 78px;
  padding: 0 12px;
  text-decoration: none;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.documentModal footer a:hover,
.documentModal footer button:hover {
  background: var(--control-hover);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  color: var(--accent);
}

.documentModal footer button.danger {
  background: color-mix(in srgb, var(--danger-soft) 72%, var(--control));
  border-color: color-mix(in srgb, var(--danger-line) 70%, var(--line));
  color: var(--danger);
  font-weight: 700;
}

.documentModal footer button.danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger);
}

.recordCreateForm .formField {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.hiddenFileInput {
  height: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
}

.recordCreateForm .formField span {
  color: var(--muted);
  font-size: 12px;
}

.recordCreateForm input,
.recordCreateForm textarea {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  min-width: 0;
  padding: 9px 10px;
  resize: vertical;
}

.documentUploadError {
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  border-radius: 7px;
  color: var(--danger);
  padding: 8px 10px;
}

.mobileTableList {
  display: none;
}

.mobileTableRow {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  padding: 2px 12px;
}

.mobileTableRow.focused {
  animation: mobile-row-focus 2.2s ease-out;
}

.mobileRowTitle {
  color: var(--ink);
  font-size: calc(13px * var(--table-font-scale, 1));
  font-weight: 700;
  line-height: 1.15;
  margin: 2px 0 1px;
}

.mobileLeadCard {
  cursor: pointer;
  gap: 0;
  padding: 8px 10px 9px;
  position: relative;
}

.mobileLeadCard:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mobileLeadSendTelegramButton {
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: color-mix(in srgb, var(--panel-raised) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent) 72%, var(--muted));
  cursor: pointer;
  display: inline-flex;
  height: 27px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
  width: 27px;
}

.mobileLeadSendTelegramButton:hover,
.mobileLeadSendTelegramButton:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--panel));
  border-color: color-mix(in srgb, var(--accent-line) 70%, transparent);
  color: var(--accent);
  outline: none;
  transform: translateY(-1px);
}

.mobileLeadSendTelegramButton:disabled {
  cursor: wait;
  opacity: 0.55;
  transform: none;
}

.mobileLeadCardHeader {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: copy;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  margin: 0 0 6px;
  min-width: 0;
  padding: 0 32px 0 0;
  text-align: left;
  touch-action: manipulation;
}

.mobileLeadCardHeader:active {
  opacity: 0.72;
}

.mobileLeadCardCode {
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
  font-size: calc(10.5px * var(--table-font-scale, 1));
  font-weight: 560;
  line-height: 1.15;
}

.mobileLeadCardName {
  color: var(--ink);
  display: block;
  font-size: calc(14px * var(--table-font-scale, 1));
  font-weight: 650;
  line-height: 1.15;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mobileLeadCopiedNotice {
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent-line) 70%, transparent);
  border-radius: 999px;
  color: var(--accent);
  font-size: calc(10px * var(--table-font-scale, 1));
  font-weight: 650;
  justify-self: start;
  line-height: 1.1;
  margin: -1px 0 5px;
  padding: 3px 7px;
}

.mobileLeadCardFields {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-column-gap: 6px;
  column-gap: 6px;
  grid-row-gap: 2px;
  row-gap: 2px;
  margin-bottom: 5px;
  min-width: 0;
}

.mobileLeadCardFields span,
.mobileLeadCardSection > span,
.mobileLeadDownloadsHeader {
  color: var(--muted);
  font-size: calc(10px * var(--table-font-scale, 1));
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.mobileLeadCardFields strong {
  color: var(--ink);
  font-size: calc(10.5px * var(--table-font-scale, 1));
  font-weight: 560;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mobileLeadCardSection,
.mobileLeadDownloads {
  border-top: 1px solid var(--line);
  margin-top: 5px;
  padding-top: 5px;
}

.mobileLeadCardSection p {
  color: var(--ink);
  font-size: calc(11px * var(--table-font-scale, 1));
  line-height: 1.28;
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.mobileLeadMissingChips {
  color: var(--ink);
  display: block;
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 620;
  line-height: 1.28;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.mobileLeadMissingChips i {
  color: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
}

.mobileLeadMissingChips i:not(:last-child)::after {
  content: ", ";
}

.mobileLeadWorkFields {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  margin-top: 4px;
}

.mobileLeadWorkFields span {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  grid-template-columns: 58px minmax(0, 1fr);
  min-width: 0;
}

.mobileLeadWorkFields i {
  color: var(--muted);
  font-size: calc(10px * var(--table-font-scale, 1));
  font-style: normal;
  font-weight: 560;
  line-height: 1.2;
}

.mobileLeadWorkFields strong {
  color: var(--ink);
  font-size: calc(10.5px * var(--table-font-scale, 1));
  font-weight: 560;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mobileLeadSecondaryFields {
  background: color-mix(in srgb, var(--control) 72%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 7px;
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  margin-top: 6px;
  padding: 6px 7px;
}

.mobileLeadSecondaryFields span {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: 58px minmax(0, 1fr);
  min-width: 0;
}

.mobileLeadSecondaryFields i {
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
  font-size: calc(9.5px * var(--table-font-scale, 1));
  font-style: normal;
  font-weight: 650;
  line-height: 1.2;
}

.mobileLeadSecondaryFields strong {
  color: color-mix(in srgb, var(--ink-soft) 86%, var(--muted));
  font-size: calc(10.5px * var(--table-font-scale, 1));
  font-weight: 560;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mobileLeadMuted {
  color: var(--muted) !important;
  font-size: calc(10.5px * var(--table-font-scale, 1)) !important;
}

.mobileLeadCardSummaryText {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.mobileLeadFullSummary {
  background: color-mix(in srgb, var(--control) 72%, var(--panel));
  border: 1px solid var(--line);
  border-radius: 7px;
  margin-top: 5px;
  padding: 5px 7px;
}

.mobileLeadFullSummary summary {
  color: color-mix(in srgb, var(--ink) 70%, var(--muted));
  cursor: pointer;
  font-size: calc(10.5px * var(--table-font-scale, 1));
  font-weight: 650;
  list-style: none;
}

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

.mobileLeadFullSummary p {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}

.mobileLeadFullSummary button {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: calc(10.5px * var(--table-font-scale, 1));
  font-weight: 650;
  margin-top: 5px;
  padding: 3px 7px;
}

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

.mobileLeadDownloadsHeader .downloadsHeaderActions {
  gap: 4px;
  min-width: 112px;
}

.mobileLeadDownloadsHeader .downloadsUploadButton {
  padding-inline: 6px;
}

.mobileLeadDocumentCard {
  align-items: start;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  row-gap: 3px;
}

.mobileLeadDocumentCard .leadDocumentCardBadge {
  grid-column: 1;
  grid-row: 1;
  margin-top: 1px;
}

.mobileLeadDocumentCard .leadDocumentCardMain {
  display: contents;
}

.mobileLeadDocumentCard .leadDocumentCardMain strong {
  align-self: center;
  grid-column: 2;
  grid-row: 1;
}

.mobileLeadDocumentCard .leadDocumentCardMain em {
  color: var(--muted);
  font-size: calc(10px * var(--table-font-scale, 1));
  font-weight: 650;
  grid-column: 1 / -1;
  grid-row: 2;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobileLeadDocumentCard .leadDocumentCardSummary {
  grid-column: 1 / -1;
  grid-row: 3;
  line-height: 1.25;
}

.mobileLeadFullSummary summary {
  list-style: none;
}

.mobileLeadFullSummary summary p {
  margin: 0;
}

.mobileLeadDownloads summary i {
  border-bottom: 4px solid transparent;
  border-left: 5px solid color-mix(in srgb, var(--ink) 65%, var(--muted));
  border-top: 4px solid transparent;
  display: inline-block;
  height: 0;
  transition: transform 160ms ease;
  width: 0;
}

.mobileLeadDownloads[open] summary i {
  transform: rotate(90deg);
}

.mobileLeadDownloads .leadDocumentCardList {
  gap: 5px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 5px;
}

.mobileLeadDocumentCard.leadDocumentCard {
  align-items: start;
  gap: 3px 5px;
  grid-template-columns: 24px minmax(0, 1fr);
  min-height: 62px;
  padding: 4px 5px;
}

.mobileLeadDocumentCard .leadDocumentCardBadge {
  height: 18px;
  width: 24px;
}

.mobileLeadDocumentCard .leadDocumentCardMain {
  align-items: baseline;
  display: flex;
  gap: 4px;
}

.mobileLeadDocumentCard .leadDocumentCardMain strong {
  flex: 0 1 auto;
  min-width: 0;
}

.mobileLeadDocumentCard .leadDocumentCardMain em {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

.mobileLeadDocumentCard .leadDocumentCardSummary {
  color: var(--ink-soft);
  display: -webkit-box;
  grid-column: 1 / -1;
  line-height: 1.22;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.mobileLeadExtraDownloads {
  grid-column: 1 / -1;
}

.mobileLeadExtraDownloads .leadDocumentCardList {
  grid-template-columns: 1fr;
}

.mobileTableRow .mobileField {
  display: grid;
  grid-gap: 0;
  gap: 0;
  min-width: 0;
}

.mobileCalendarField details,
.mobileDescriptionDetails {
  min-width: 0;
}

.mobileCalendarField summary {
  cursor: pointer;
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  list-style: none;
}

.mobileCalendarField summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobileCalendarField summary::-webkit-details-marker,
.mobileDescriptionDetails summary::-webkit-details-marker {
  display: none;
}

.mobileMiniCalendar {
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 8px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  margin-top: 5px;
  padding: 6px;
}

.mobileMiniCalendarHeader {
  align-items: center;
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  grid-gap: 6px;
  gap: 6px;
}

.mobileMiniCalendarHeader button {
  align-items: center;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  height: 26px;
  justify-content: center;
  padding: 0;
}

.mobileMiniCalendarHeader strong {
  color: var(--ink);
  font-size: calc(12px * var(--table-font-scale, 1));
  font-weight: 700;
  text-align: center;
}

.mobileMiniCalendarWeekdays,
.mobileMiniCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.mobileMiniCalendarWeekdays span {
  color: var(--muted);
  font-size: calc(10px * var(--table-font-scale, 1));
  font-weight: 700;
  text-align: center;
}

.mobileMiniCalendarGrid {
  border-left: 1px solid color-mix(in srgb, var(--line) 64%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--line) 64%, transparent);
}

.mobileMiniCalendarDay {
  align-items: center;
  aspect-ratio: 1;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 64%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--line) 64%, transparent);
  display: grid;
  justify-items: center;
  min-width: 0;
  position: relative;
}

.mobileMiniCalendarDay span {
  color: var(--ink);
  font-size: calc(10px * var(--table-font-scale, 1));
}

.mobileMiniCalendarDay.outside span {
  color: color-mix(in srgb, var(--muted) 58%, transparent);
}

.mobileMiniCalendarDay.hasEvents {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.mobileMiniCalendarDay.today {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}

.mobileMiniCalendarDay i {
  align-items: center;
  background: var(--accent);
  border-radius: 999px;
  color: var(--accent-ink);
  display: inline-flex;
  font-size: calc(8px * var(--table-font-scale, 1));
  font-style: normal;
  height: 12px;
  justify-content: center;
  min-width: 12px;
  padding: 0 3px;
  position: absolute;
  right: 2px;
  top: 2px;
}

.mobileCalendarInlineList {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  margin-top: 5px;
}

.mobileCalendarInlineList > span {
  color: var(--muted);
  font-size: calc(10px * var(--table-font-scale, 1));
  font-weight: 700;
}

.mobileCalendarInlineList ul {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobileCalendarInlineList li {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  padding-left: 0;
}

.mobileCalendarCreateButton {
  background: var(--control);
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
  justify-self: start;
  margin-top: 5px;
  min-height: 26px;
  padding: 4px 8px;
}

.mobileCalendarCreateButton:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--accent);
}

.mobileDescriptionDetails {
  border-bottom: 1px solid var(--line);
  padding: 1px 0 3px;
}

.mobileDescriptionDetails summary {
  color: var(--accent);
  cursor: pointer;
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
}

.mobileDescriptionDetails p {
  color: var(--ink);
  font-size: calc(13px * var(--table-font-scale, 1));
  line-height: 1.28;
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.mobileTableRow span {
  color: var(--muted);
  font-size: calc(11px * var(--table-font-scale, 1));
}

.mobileTableRow strong {
  color: var(--ink);
  font-size: calc(13px * var(--table-font-scale, 1));
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mobileField.editable {
  cursor: text;
}

.mobileField.editable:active {
  background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
}

.mobileInlineEditor {
  align-items: stretch;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr) 30px 30px;
}

.mobileInlineEditor input,
.mobileInlineEditor textarea {
  background: var(--control);
  border: 1px solid var(--accent-line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  min-width: 0;
  padding: 5px 7px;
}

.mobileInlineEditor button,
.mobileLeadSummary button {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  display: inline-flex;
  justify-content: center;
}

.mobileLeadSummary {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  border-bottom: 1px solid var(--line);
  margin-top: 1px;
  padding: 2px 0 3px;
}

.mobileLeadSummary strong {
  display: -webkit-box;
  line-height: 1.28;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mobileLeadSummary details {
  color: var(--ink-soft);
  font-size: calc(12px * var(--table-font-scale, 1));
  margin-top: 0;
}

.mobileLeadSummary summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}

.mobileLeadSummary p {
  line-height: 1.3;
  max-height: 6.5em;
  margin: 2px 0 0;
  overflow: auto;
}

.mobileLeadSummary button {
  justify-self: start;
  margin-top: 1px;
  padding: 2px 7px;
}

.leadSummaryHistoryModal {
  max-width: 560px;
}

.leadSummaryComposer {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  padding: 9px;
}

.leadSummaryComposer label {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.leadSummaryComposer label span {
  color: var(--muted);
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
}

.leadSummaryComposer textarea {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  min-height: 0;
  padding: 7px 8px;
  resize: vertical;
}

.leadSummaryComposer button {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: calc(12px * var(--table-font-scale, 1));
  font-weight: 700;
  justify-self: start;
  min-height: 30px;
  padding: 5px 10px;
}

.leadSummaryComposer button:disabled {
  cursor: default;
  opacity: 0.55;
}

.leadSummaryHistoryList {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.leadSummaryHistoryList article {
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  padding: 8px;
}

.leadSummaryHistoryList article span {
  color: var(--muted);
  font-size: calc(11px * var(--table-font-scale, 1));
}

.leadSummaryHistoryList article strong {
  color: var(--ink);
  font-size: calc(13px * var(--table-font-scale, 1));
}

.leadSummaryHistoryList article p {
  color: var(--ink-soft);
  font-size: calc(12px * var(--table-font-scale, 1));
  line-height: 1.35;
  margin: 0;
}

.summaryArchiveButton {
  align-self: start;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
  justify-self: start;
  margin-top: 2px;
  min-height: 24px;
  padding: 3px 8px;
}

.summaryArchiveButton:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
}

.summaryArchiveButton.confirm {
  border-color: var(--danger);
  color: var(--danger);
}

.summaryArchiveButton:disabled {
  cursor: default;
  opacity: 0.55;
}

.status {
  border-radius: 999px;
  display: inline-flex;
  font-size: calc(12px * var(--table-font-scale, 1));
  padding: 2px 8px;
}

.status.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.status.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.settingsSurface {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.settingsHeader {
  align-items: flex-end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.settingsHeader h1 {
  font-size: 22px;
  margin: 0 0 4px;
}

.settingsHeader p {
  color: var(--muted);
  margin: 0;
  max-width: 820px;
}

.liveStatus {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: calc(12px * var(--table-font-scale, 1));
  min-width: 68px;
  padding: 5px 10px;
  text-align: center;
  text-transform: capitalize;
}

.liveStatus.saved {
  background: var(--ok-soft);
  border-color: var(--ok-soft);
  color: var(--ok);
}

.liveStatus.saving,
.liveStatus.loading {
  background: var(--info-soft);
  border-color: var(--info-line);
  color: var(--info);
}

.liveStatus.error,
.settingsError {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger);
}

.settingsError {
  border: 1px solid var(--danger-line);
  border-radius: 8px;
  font-size: calc(13px * var(--table-font-scale, 1));
  padding: 10px 12px;
}

.settingsTabs {
  display: inline-flex;
  gap: 6px;
}

.settingsTabs button {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: calc(13px * var(--table-font-scale, 1));
  min-height: 34px;
  padding: 7px 12px;
}

.settingsTabs button.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 700;
}

.settingsSummary {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  padding: 10px;
}

.settingsSummary strong {
  color: var(--ink);
  font-size: calc(13px * var(--table-font-scale, 1));
}

.settingsSummary span {
  color: var(--muted);
  font-size: calc(12px * var(--table-font-scale, 1));
}

.placeholderGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.placeholderGrid span {
  background: var(--info-soft);
  border: 1px solid var(--info-line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: calc(12px * var(--table-font-scale, 1));
  padding: 5px 8px;
}

.feePreview {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.feePreview div {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 10px;
}

.feePreview div:last-child {
  border-bottom: 0;
}

.feePreview span,
.feePreview strong {
  font-size: calc(12px * var(--table-font-scale, 1));
}

.versionPlanGrid {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.versionPlanGrid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  padding: 10px;
}

.versionPlanGrid strong {
  font-size: calc(13px * var(--table-font-scale, 1));
}

.versionPlanGrid span {
  color: var(--muted);
  font-size: calc(12px * var(--table-font-scale, 1));
  line-height: 1.35;
}

.presetGrid {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.presetCard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-height: 132px;
  padding: 12px;
  text-align: left;
}

.presetCard:hover,
.presetCard.active {
  border-color: var(--accent);
  box-shadow: 0 8px 22px var(--shadow);
}

.presetCard span {
  font-size: calc(14px * var(--table-font-scale, 1));
  font-weight: 700;
}

.presetCard strong {
  color: var(--accent);
  font-size: 24px;
}

.presetCard small {
  color: var(--muted);
  font-size: calc(12px * var(--table-font-scale, 1));
  line-height: 1.35;
}

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

.settingsPanel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  padding: 14px;
}

.settingsPanel.wide {
  grid-column: span 2;
}

.settingsPanel h2 {
  font-size: 15px;
  margin: 0;
}

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

.settingsPanelHeader p {
  color: var(--muted);
  font-size: calc(12px * var(--table-font-scale, 1));
  line-height: 1.35;
  margin: 4px 0 0;
}

.settingsPanelHeader button,
.quietDangerButton {
  align-items: center;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: calc(12px * var(--table-font-scale, 1));
  font-weight: 700;
  min-height: 30px;
  padding: 6px 10px;
}

.settingsPanelHeader button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.settingsPill {
  background: color-mix(in srgb, var(--accent) 12%, var(--control));
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 999px;
  color: var(--accent);
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
  padding: 4px 8px;
  white-space: nowrap;
}

.settingsActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settingsActions button {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: calc(12px * var(--table-font-scale, 1));
  font-weight: 800;
  min-height: 32px;
  padding: 7px 12px;
}

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

.settingsInlineNotice,
.settingsInlineError {
  font-size: calc(12px * var(--table-font-scale, 1));
  font-weight: 700;
}

.settingsInlineNotice {
  color: var(--accent);
}

.settingsInlineError {
  color: #b42318;
}

.settingsPanel label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.settingsPanel label > span,
.switchRow span {
  color: var(--muted);
  font-size: calc(12px * var(--table-font-scale, 1));
}

.settingsPanel input:not([type="checkbox"]),
.settingsPanel select,
.settingsPanel textarea {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  min-width: 0;
  padding: 9px 10px;
}

.settingsPanel textarea {
  font-size: calc(13px * var(--table-font-scale, 1));
  line-height: 1.45;
  resize: vertical;
}

.outreachCampaignPanel {
  align-content: start;
}

.outreachTouchGrid {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.outreachTouchGrid article {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
  padding: 8px;
}

.outreachTouchGrid article span {
  color: var(--accent);
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 800;
}

.outreachTouchGrid article strong {
  color: var(--ink);
  font-size: calc(12px * var(--table-font-scale, 1));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outreachTouchGrid article small {
  color: var(--muted);
  display: -webkit-box;
  font-size: calc(11px * var(--table-font-scale, 1));
  line-height: 1.25;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.settingsPanel input[type="range"] {
  accent-color: var(--accent);
  padding: 0;
}

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

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

.projectPeopleList {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.projectPersonCard {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  grid-template-columns: minmax(140px, 0.7fr) minmax(120px, 0.5fr) minmax(0, 1.5fr) auto;
  padding: 10px;
}

.projectPersonCard label.wide {
  min-width: 0;
}

.projectPersonCard .quietDangerButton {
  align-self: end;
  color: var(--danger);
}

.projectPersonCard .quietDangerButton:hover {
  background: var(--danger-soft);
  border-color: var(--danger-line);
}

.settingsChecklist {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.offerFieldList {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.offerFieldCard {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  padding: 10px;
}

.offerFieldHeader {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.offerFieldHeader span {
  color: var(--muted);
  font-size: calc(12px * var(--table-font-scale, 1));
}

.settingsFieldGrid.compact {
  align-items: center;
  grid-template-columns: minmax(180px, 1fr) auto auto;
}

.switchRow {
  align-items: center;
  cursor: pointer;
  display: flex !important;
  gap: 8px !important;
}

.switchRow input,
.intentPill input,
.nodeToggle input {
  accent-color: var(--accent);
}

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

.intentPill,
.nodeToggle {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex !important;
  gap: 6px !important;
  min-height: 30px;
  padding: 5px 9px;
}

.intentPill span,
.nodeToggle span {
  color: var(--ink-soft);
  font-size: calc(12px * var(--table-font-scale, 1));
}

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

.tracePreviewToolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tracePreviewToolbar button {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: calc(13px * var(--table-font-scale, 1));
  min-height: 32px;
  padding: 6px 10px;
}

.tracePreviewToolbar button:disabled {
  cursor: default;
  opacity: 0.55;
}

.tracePreviewToolbar span {
  color: var(--muted);
  font-size: calc(12px * var(--table-font-scale, 1));
}

.traceDecisionCard {
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 9px 10px;
}

.traceDecisionCard div {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
}

.traceDecisionCard span {
  color: var(--muted);
  font-size: calc(11px * var(--table-font-scale, 1));
  font-weight: 700;
  text-transform: uppercase;
}

.traceDecisionCard strong {
  color: var(--ink);
  font-size: calc(13px * var(--table-font-scale, 1));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traceDecisionCard p {
  color: var(--ink-soft);
  font-size: calc(12px * var(--table-font-scale, 1));
  grid-column: 1 / -1;
  line-height: 1.35;
  margin: 0;
}

.traceChat {
  align-content: start;
  background: var(--control);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding: 10px;
}

.traceBubble {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  padding: 9px 10px;
}

.traceBubble.review {
  border-left-color: var(--warn);
}

.traceBubble.blocked {
  border-left-color: var(--danger);
}

.traceBubble.skipped {
  border-left-color: var(--muted);
}

.traceBubble div {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.traceBubble strong {
  font-size: calc(13px * var(--table-font-scale, 1));
}

.traceBubble span {
  color: var(--muted);
  font-family: var(--mono-font, monospace);
  font-size: calc(11px * var(--table-font-scale, 1));
}

.traceBubble p {
  color: var(--ink-soft);
  font-size: calc(12px * var(--table-font-scale, 1));
  line-height: 1.4;
  margin: 0;
}

.traceBubble small {
  color: var(--muted);
  font-size: calc(11px * var(--table-font-scale, 1));
  line-height: 1.35;
}

@media (max-width: 860px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .appShell {
    grid-template-columns: 1fr;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }

  .sidebar {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    min-width: 0;
    overflow: hidden;
    padding: 14px 14px 10px;
    position: relative;
  }

  .brand {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-right: 118px;
  }

  .sidebarFooter {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    inset: 14px 14px auto 14px;
    margin-top: 0;
    pointer-events: none;
    position: absolute;
  }

  .sidebarBackup {
    grid-column: 2;
    justify-self: center;
    padding-bottom: 0;
    pointer-events: auto;
  }

  .sidebarBottom {
    border-top: 0;
    grid-column: 3;
    justify-self: end;
    margin-top: 0;
    pointer-events: auto;
    padding-top: 0;
    position: static;
  }

  .nav {
    align-items: center;
    display: flex;
    gap: 6px;
    margin-inline: -14px;
    max-width: 100vw;
    min-width: 0;
    overflow-x: auto;
    padding: 0 14px 4px;
    scrollbar-width: thin;
    white-space: nowrap;
  }

  .navPrimary {
    border-bottom: 0;
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    min-width: 0;
    padding-bottom: 0;
  }

  .nav a {
    flex: 0 0 auto;
    padding: 7px 8px;
  }

  .navMoreLabelDesktop {
    display: none;
  }

  .navMoreLabelMobile {
    display: inline;
  }

  .navIcon,
  .navSummaryIcon {
    height: 16px;
    width: 16px;
  }

  .navSecondary {
    align-items: center;
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: 0;
    max-width: none;
  }

  .navSecondary summary {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 7px 8px;
    width: max-content;
  }

  .navSecondary > div {
    border-left: 0;
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    margin: 0;
    overflow: visible;
    padding: 0;
  }

  .themeToggle {
    gap: 7px;
    font-size: 12px;
  }

  .backupButton {
    border-color: transparent;
    color: var(--muted);
    gap: 5px;
    min-height: 24px;
    padding: 2px 4px;
  }

  .backupButton:hover,
  .backupButton:focus-visible {
    background: transparent;
    border-color: transparent;
    color: var(--accent);
  }

  .backupButton span {
    font-size: 12px;
  }

  .backupButton svg {
    height: 14px;
    width: 14px;
  }

  .themeToggle i {
    height: 20px;
    width: 38px;
  }

  .themeToggle i::after {
    height: 16px;
    width: 16px;
  }

  .themeToggle input:checked + i::after {
    transform: translateX(18px);
  }

  .tableHeader {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .tableHeader > div:first-child {
    align-items: end;
    display: grid;
    grid-gap: 7px;
    gap: 7px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tableHeader h1 {
    font-size: 15px;
    line-height: 1.1;
    margin: 0;
  }

  .tableHeader p {
    font-size: 11px;
    line-height: 1.15;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .toolbar {
    display: grid;
    grid-gap: 5px;
    gap: 5px;
    grid-template-columns: minmax(108px, 1fr) repeat(4, 30px);
    width: 100%;
  }

  .toolbar .searchBox {
    min-width: 0;
    width: 100%;
  }

  .toolbar button {
    height: 30px;
    width: 30px;
  }

  .tableColorControl {
    display: none;
  }

  .leadFieldGuide summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding: 5px 2px;
  }

  .leadFieldGuide summary::before {
    display: none;
  }

  .leadFieldGuideGrid {
    border-radius: 7px;
  }

  .leadFieldGuideHeader {
    display: none;
  }

  .leadFieldGuideRow {
    display: grid;
    grid-gap: 3px;
    gap: 3px;
    grid-template-columns: 1fr;
    padding: 9px 10px;
  }

  .leadFieldGuideRow strong,
  .leadFieldGuideRow span,
  .leadFieldGuideRow p {
    border-right: 0;
    padding: 0;
  }

  .leadFieldGuideRow span {
    font-size: 11px;
  }

  .handoffBallControl {
    display: none;
  }

  .detailsFloatingButton {
    display: none;
  }

  .detailsDrawerBackdrop {
    align-items: stretch;
    padding: 0;
  }

  .detailsDrawer {
    border-radius: 0;
    max-height: none;
    max-width: 100%;
    min-height: 100%;
    padding: 12px;
    width: 100%;
  }

  .detailsDrawerBody {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .detailsDrawerBody.lead,
  .detailsDrawerBody.coldTarget {
    grid-template-columns: 1fr;
  }

  .detailsDrawerFieldsPanel {
    background: color-mix(in srgb, var(--control) 70%, var(--panel));
    border: 1px solid var(--line);
    border-radius: 8px;
    order: 2;
    overflow: visible;
  }

  .detailsDrawerFieldsPanel > summary {
    align-items: center;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    font-size: calc(12px * var(--table-font-scale, 1));
    font-weight: 800;
    justify-content: space-between;
    list-style: none;
    padding: 10px 11px;
  }

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

  .detailsDrawerFieldsPanel > summary strong {
    color: var(--ink-soft);
    font-size: calc(11px * var(--table-font-scale, 1));
  }

  .detailsDrawerFieldsPanel > summary::after {
    border-bottom: 4px solid transparent;
    border-left: 5px solid color-mix(in srgb, var(--ink) 65%, var(--muted));
    border-top: 4px solid transparent;
    content: "";
    height: 0;
    margin-left: 8px;
    transition: transform 160ms ease;
    width: 0;
  }

  .detailsDrawerFieldsPanel[open] > summary::after {
    transform: rotate(90deg);
  }

  .detailsDrawerFields {
    grid-template-columns: 1fr;
    overflow: visible;
    padding: 0 10px 10px;
  }

  .detailsSecondaryFields > div {
    grid-template-columns: 1fr;
  }

  .detailsDrawerSections {
    order: 1;
    overflow: visible;
  }

  .detailsDrawerSection.offer {
    padding: 9px 10px;
  }

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

  .detailsDrawerSectionHeader .detailsOfferActions {
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .detailsOfferMissingEditor {
    grid-template-columns: 1fr;
  }

  .detailsOfferMissingEditor label {
    gap: 3px;
    grid-template-columns: 1fr;
  }

  .detailsOfferMissingEditor small {
    grid-column: 1;
  }

  .detailsDrawerSection.outreach {
    padding: 10px;
  }

  .content {
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
    padding: 18px 12px;
  }

  .calendarHeader {
    flex-direction: column;
  }

  .calendarToolbar {
    justify-content: flex-start;
    width: 100%;
  }

  .calendarSummary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    padding: 9px 12px;
  }

  .calendarGrid {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    overflow: hidden;
    width: 100%;
  }

  .calendarSplit {
    gap: 10px;
    grid-template-columns: 1fr;
    inline-size: 100%;
    max-inline-size: 100%;
    min-height: 0;
    width: 100%;
  }

  .calendarSplit .calendarGridMonth {
    inline-size: 100%;
    max-inline-size: 100%;
    min-height: 0;
    width: 100%;
  }

  .calendarMonthPanel {
    width: 100%;
  }

  .calendarGridMonth,
  .calendarGridWeek {
    background: var(--line);
    border: 1px solid var(--line);
    gap: 1px;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    min-width: 0;
  }

  .calendarSplit .calendarGridMonth {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .calendarPage {
    gap: 10px;
    min-height: 0;
  }

  .calendarHeader {
    gap: 10px;
  }

  .calendarHeader h1 {
    font-size: 22px;
    margin-bottom: 3px;
  }

  .calendarHeader p {
    font-size: 12px;
    line-height: 1.35;
  }

  .calendarToolbar {
    gap: 6px;
  }

  .calendarNav button,
  .calendarViewSwitch button {
    font-size: 12px;
    height: 30px;
    min-width: 32px;
    padding: 0 8px;
  }

  .calendarViewSwitch {
    display: none;
  }

  .calendarSummary {
    min-height: 36px;
    padding: 7px 10px;
  }

  .calendarSummaryTitle {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }

  .calendarMonthControls {
    width: 100%;
  }

  .calendarMonthControls select {
    flex: 1 1;
    max-width: none;
    min-width: 0;
  }

  .calendarCreateForm {
    grid-template-columns: 1fr;
  }

  .calendarSummary strong {
    font-size: 14px;
  }

  .calendarSummary span {
    font-size: 12px;
  }

  .calendarDay {
    aspect-ratio: 1 / 1;
    border: 0;
    box-sizing: border-box;
    min-height: 0;
    min-width: 0;
    padding: 4px 2px;
  }

  .calendarDayButton {
    touch-action: manipulation;
  }

  .calendarDay header {
    align-items: center;
    display: grid;
    grid-gap: 1px;
    gap: 1px;
    justify-items: center;
    margin-bottom: 1px;
  }

  .calendarDay header span {
    display: none;
  }

  .calendarDay header strong {
    font-size: 14px;
    line-height: 1.1;
    min-width: 0;
    text-align: center;
  }

  .calendarDayItems {
    align-items: center;
    display: flex;
    gap: 2px;
    justify-content: center;
    min-height: 8px;
    overflow: hidden;
  }

  .calendarDayItems .calendarChip {
    border: 0;
    border-radius: 999px;
    display: block;
    height: 5px;
    overflow: hidden;
    padding: 0;
    width: 5px;
  }

  .calendarDayItems .calendarChipReminder {
    background: var(--warn);
  }

  .calendarDayItems .calendarChipEvent {
    background: var(--accent);
  }

  .calendarDayItems .calendarChip > *,
  .calendarDayItems .calendarChipTime {
    display: none;
  }

  .calendarMore {
    font-size: 9px;
    line-height: 1;
    padding: 0;
  }

  .calendarAgendaDay {
    grid-template-columns: 1fr;
  }

  .calendarInspector {
    height: auto;
    min-height: 0;
    width: 100%;
  }

  .calendarInspector > header {
    gap: 2px;
    padding: 10px;
  }

  .calendarInspector > header span {
    font-size: 10px;
  }

  .calendarInspector > header strong {
    font-size: 14px;
  }

  .calendarTimeline {
    gap: 8px;
    max-height: 46vh;
    overflow-y: auto;
    padding: 10px;
  }

  .calendarTimelineItem {
    gap: 7px;
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .calendarTimelineRail span {
    border-width: 2px;
    height: 9px;
    margin-top: 7px;
    width: 9px;
  }

  .calendarTimelineRail::after {
    top: 16px;
  }

  .calendarTimelineCard {
    gap: 5px;
    padding: 8px;
  }

  .calendarTimelineCard strong {
    font-size: 13px;
  }

  .calendarTimelineCard p {
    font-size: 11px;
    line-height: 1.35;
  }

  .calendarTimelineActions a,
  .calendarTimelineActions button {
    font-size: 11px;
    min-height: 26px;
    padding: 4px 7px;
  }

  @media (max-width: 480px) {
    .calendarSplit,
    .calendarSplit .calendarGridMonth,
    .calendarInspector {
      inline-size: 100%;
      max-inline-size: 100%;
    }
  }

  .bulkActionBar {
    grid-column: 1 / -1;
  }

  .searchBox {
    width: 100%;
  }

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

  .settingsHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .presetGrid,
  .settingsGrid {
    grid-template-columns: 1fr;
  }

  .settingsPanel.wide {
    grid-column: span 1;
  }

  .outreachTouchGrid {
    grid-template-columns: 1fr;
  }

  .traceChat {
    max-height: 420px;
  }

  .traceDecisionCard {
    grid-template-columns: 1fr;
  }

  .settingsFieldGrid,
  .requiredFieldsGrid,
  .projectPersonCard {
    grid-template-columns: 1fr;
  }

  .columnDropdown {
    position: static;
    width: auto;
  }

  .gridFrame {
    display: none;
  }

  .recordCreateForm {
    grid-template-columns: 1fr;
    width: min(520px, 100%);
  }

  .mobileTableList {
    display: grid;
    grid-gap: 10px;
    gap: 10px;
  }
}