@import url("./fonts/figtree.css");
@import url("./components/date-range-picker.css");
@import url("./quote-builder.css");
@import url("./reports.css");
@import url("./statements.css");
@import url("./bank-review.css");
@import url("./automation.css");
@import url("./playbooks.css");
@import url("./playbook-flow.css");

/* Tokens. Values come from the tenner.one restyle handoff; dark mode only changes these. */
:root {
  color-scheme: light;
  font-family:
    Figtree,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-synthesis: none;
  --ink: #172135;
  --muted: #596475;
  --icon: #677284;
  --nav-label: #9199a5;
  --chevron: #88909c;
  --primary: #145ec1;
  --primary-hover: #1158b5;
  --primary-ink: #fff;
  --link: #1351a6;
  --logo-accent: #156cdd;
  --nav-active-bg: #d8e6fd;
  --nav-active: #0a47a6;
  --nav-hover: #eef2f8;
  --surface: #fff;
  --sidebar: #f8fafd;
  --sidebar-line: #e1e5ea;
  --line: #e8ebef;
  --input-line: #e4e8ed;
  --divider: #eceff2;
  --table-line: #e3e8f0;
  --subtle: #f7f9fb;
  --hover: #f8fafd;
  --icon-hover: #ebeff4;
  --secondary-line: #d3d8e0;
  --avatar-bg: #d9e6f9;
  --avatar-ink: #1e4b8d;
  --focus: rgb(20 94 193 / 40%);
  --overdue: #bc4527;
  --dot-attention: #dc932e;
  --dot-progress: #276ed2;
  --dot-neutral: #babec4;
  --chart-income: #145ec1;
  --chart-expenses: #c1d2ec;
  --chart-axis: #e1e5ea;
  --chart-income-active: #0a4aa3;
  --chart-column-active: #f1f5fc;
  --chip-open-bg: #d9edff;
  --chip-open: #0b58bb;
  --chip-draft-bg: #ebeff4;
  --chip-draft: #5d646f;
  --chip-paid-bg: #dbf6e7;
  --chip-paid: #007d50;
  --chip-late-bg: #ffe8da;
  --chip-late: #9e511e;
  --positive: #007d50;
  --positive-bg: #dbf6e7;
  --negative: #bc4527;
  --negative-bg: #ffe8da;
  /* Names the date picker and developer widget read. */
  --navy: var(--ink);
  --blue: var(--primary);
  --soft: var(--subtle);
  color: var(--ink);
  background: var(--surface);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e3ebfa;
  --muted: #a1b0c8;
  --icon: #93a3bb;
  --nav-label: #7f8fa8;
  --chevron: #7f8fa8;
  --primary: #2472dc;
  --primary-hover: #3a83e6;
  --link: #7db4ff;
  --logo-accent: #65aaff;
  --nav-active-bg: #16345f;
  --nav-active: #acd0ff;
  --nav-hover: #131f33;
  --surface: #0b1528;
  --sidebar: #080f20;
  --sidebar-line: #25344a;
  --line: #25344a;
  --input-line: #2f4058;
  --divider: #1f2d42;
  --table-line: #25344a;
  --subtle: #101b2e;
  --hover: #111d31;
  --icon-hover: #172b47;
  --secondary-line: #3a4d68;
  --avatar-bg: #183051;
  --avatar-ink: #94c7ff;
  --focus: rgb(125 180 255 / 45%);
  --overdue: #ff9d80;
  --dot-attention: #e5ad43;
  --dot-progress: #65aaff;
  --dot-neutral: #62728a;
  --chart-income: #4b92f0;
  --chart-expenses: #34507a;
  --chart-axis: #2f4058;
  --chart-income-active: #8cbcff;
  --chart-column-active: #13213a;
  --chip-open-bg: #15335a;
  --chip-open: #9ccbff;
  --chip-draft-bg: #1f2c40;
  --chip-draft: #b4c0d2;
  --chip-paid-bg: #10352f;
  --chip-paid: #70ddbd;
  --chip-late-bg: #43281a;
  --chip-late: #ffbd92;
  --positive: #70ddbd;
  --positive-bg: #10352f;
  --negative: #ff9d80;
  --negative-bg: #43281a;
}

/* Base */
* {
  box-sizing: border-box;
}
html,
body,
#app {
  height: 100%;
}
body {
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  background: var(--surface);
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a.button:hover,
.nav a:hover,
.account-menu a:hover,
.settings-tile:hover,
.task-row a:hover {
  text-decoration: none;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
h2 {
  font-size: 15px;
  font-weight: 600;
}
h3 {
  font-size: 14px;
  font-weight: 600;
}
small,
.muted {
  color: var(--muted);
}
.no-wrap {
  white-space: nowrap;
}
.section-gap {
  margin-top: 24px;
}
.split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.wordmark {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark > span {
  color: var(--logo-accent);
}
.skip {
  position: fixed;
  top: -50px;
  left: 10px;
  z-index: 1000;
  background: var(--surface);
  padding: 10px;
}
.skip:focus {
  top: 10px;
}

/* The frame stays put. Navigation and page contents own their scroll areas. */
.shell {
  height: 100dvh;
  min-height: 0;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 232px;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: 26px 16px 18px;
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-line);
}
.sidebar:not(:hover) {
  scrollbar-width: thin;
}
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 0 0 0 8px;
}
.brand-actions {
  display: flex;
  gap: 2px;
}
.icon-button,
.theme-toggle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  transition:
    background-color 0.12s ease-out,
    color 0.12s ease-out;
}
.icon-button:hover,
.theme-toggle:hover {
  background: var(--icon-hover);
}
.theme-toggle span {
  display: flex;
}
.theme-toggle .theme-sun {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .theme-moon {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .theme-sun {
  display: flex;
}
.workspace {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  padding: 9px 10px;
  background: var(--surface);
  border: 1px solid var(--sidebar-line);
  border-radius: 6px;
}
.workspace:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.workspace-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  font-size: 13px;
  font-weight: 700;
}
.workspace select:not([multiple]) {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 14px 0 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  appearance: none;
  cursor: pointer;
}
.workspace select:focus-visible {
  outline: 0;
}
.workspace-chevron {
  position: absolute;
  right: 10px;
  display: flex;
  color: var(--chevron);
  pointer-events: none;
  transform: rotate(90deg);
}
.sidebar > .nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.sidebar .nav > * {
  flex-shrink: 0;
}
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-group-label {
  padding: 0 12px 4px;
  color: var(--nav-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transition:
    background-color 0.12s ease-out,
    color 0.12s ease-out;
}
.nav a > svg {
  flex-shrink: 0;
  color: var(--icon);
}
.nav a:hover {
  background: var(--nav-hover);
}
.nav a.active {
  background: var(--nav-active-bg);
  color: var(--nav-active);
  font-weight: 600;
}
.nav a.active > svg {
  color: var(--nav-active);
}
.sidebar-bottom {
  flex-shrink: 0;
  margin-top: auto;
}
.brand-mark {
  display: none;
}
/* Demo mode: a bar above the frame, which gives up that much height. */
:root[data-demo],
:root[data-archive] {
  --demo-bar: 44px;
}
/* Demo mode is a quiet grey; the archive notice (archive-bar.js) keeps the brand colour. */
.demo-bar {
  --bar-bg: #5b6575;
  --bar-ink: #fff;
}
.demo-bar.archive-bar {
  --bar-bg: var(--primary);
  --bar-ink: var(--primary-ink);
}
:root[data-theme="dark"] .demo-bar:not(.archive-bar) {
  --bar-bg: #2a3547;
  --bar-ink: #e3ebfa;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .demo-bar:not(.archive-bar) {
    --bar-bg: #2a3547;
    --bar-ink: #e3ebfa;
  }
}
.demo-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: var(--demo-bar);
  padding: 0 16px;
  background: var(--bar-bg);
  color: var(--bar-ink);
  font-size: 14px;
  font-weight: 500;
}
.demo-bar span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .demo-bar-more {
    display: none;
  }
}
.demo-bar a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}
.demo-bar button {
  flex-shrink: 0;
  min-height: 0;
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
}
.demo-bar button:hover {
  background: rgb(255 255 255 / 16%);
}
/* Demo mode's plan switch: Tenner One · Pro · Pro Plus, the shown plan filled in. */
.demo-plans {
  display: flex;
  flex-shrink: 0;
  border: 1px solid currentColor;
  border-radius: 6px;
  overflow: hidden;
}
.demo-bar .demo-plans button {
  border: 0;
  border-radius: 0;
}
.demo-bar .demo-plans button + button {
  border-left: 1px solid currentColor;
}
.demo-bar .demo-plans button[aria-pressed="true"] {
  background: var(--bar-ink);
  color: var(--bar-bg);
}
@media (max-width: 480px) {
  .demo-bar {
    gap: 8px;
    padding: 0 8px;
  }
  .demo-bar .demo-plans button {
    padding: 5px 8px;
  }
}
/* Setup wizard: questions on one side, the invoice they fill in on the other. */
.shell[data-page="setup"] .sidebar,
.shell[data-page="setup"] .nav-collapse {
  display: none;
}
.shell[data-page="setup"] .main {
  margin-left: 0;
  scrollbar-gutter: auto;
  transition: none;
}
#page[data-layout="setup"] {
  max-width: none;
  min-height: 100%;
  display: flex;
}
#page[data-layout="setup"] > .page-body {
  flex: 1;
  display: flex;
  min-width: 0;
  padding: 0;
}
.setup {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-width: 0;
}
.setup-stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
  height: 100dvh;
  padding: 40px 56px;
  overflow: hidden;
  background: #0d3a7d;
  color: #d9e7fd;
}
:root[data-demo] .setup-stage,
:root[data-archive] .setup-stage {
  height: calc(100dvh - var(--demo-bar));
}
.setup-stage .wordmark {
  color: #fff;
}
.setup-stage .wordmark > span {
  color: #9cc4ff;
}
.setup-paper {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
}
.setup-stage-note {
  margin: 0;
  font-size: 15px;
  text-align: center;
}
/* Paper in light and dark alike: this is what lands at the customer. */
.sheet {
  width: min(100%, 470px);
  padding: 38px 40px 32px;
  border-radius: 4px;
  background: #fff;
  color: #172135;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 24px 60px rgb(4 18 45 / 42%);
  transform: rotate(-1.2deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.is-finished .sheet {
  transform: rotate(0) scale(1.03);
}
.sheet h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}
.sheet-head .sheet-part:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sheet-company {
  font-size: 15px;
  overflow-wrap: anywhere;
}
.sheet-small {
  margin-top: 4px;
  color: #596475;
  font-size: 11.5px;
}
.sheet-logo {
  display: block;
  max-width: 96px;
  max-height: 52px;
  object-fit: contain;
}
.sheet-logo-empty {
  width: 52px;
  height: 52px;
  border: 1px dashed #c7d0dc;
  border-radius: 6px;
}
.sheet-blank {
  display: inline-block;
  width: min(var(--w), 100%);
  height: 0.72em;
  border-radius: 3px;
  background: #e6ebf2;
  vertical-align: baseline;
}
.sheet-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  color: #596475;
}
.sheet-title h2 {
  color: #172135;
}
.sheet-meta {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 2px 8px;
  margin: 0 0 24px;
}
.sheet-meta dt {
  color: #596475;
}
.sheet-meta dd {
  margin: 0;
}
.sheet-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid #e6ebf2;
  font-variant-numeric: tabular-nums;
}
.sheet-tax {
  color: #596475;
}
.sheet-total {
  border-top: 2px solid #172135;
  font-size: 16px;
  font-weight: 700;
}
.sheet-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  color: #596475;
  font-size: 12px;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
/* The part of the invoice the current question is about. */
.sheet-part {
  border-radius: 4px;
  outline: 2px solid transparent;
  outline-offset: 5px;
  transition: outline-color 0.2s ease-out;
}
.sheet-part.is-active {
  outline-color: #9cc4ff;
}
.setup-questions {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 48px 56px;
}
.setup-content {
  width: min(100%, 480px);
}
.setup-content h1 {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.setup-content h1:focus {
  outline: 0;
}
.setup-why {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.setup-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 36px;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  list-style: none;
}
.setup-progress li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.setup-progress .is-current {
  color: var(--ink);
  font-weight: 600;
}
.setup-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 12px;
}
.is-current .setup-dot,
.is-done .setup-dot {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-ink);
}
.setup-pro {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--nav-active-bg);
  color: var(--nav-active);
  font-size: 11px;
  font-weight: 600;
}
.setup-form {
  display: grid;
  gap: 16px;
}
.setup-form textarea {
  width: 100%;
}
.setup-form [hidden] {
  display: none;
}
.setup-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.setup-hint {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 400;
}
.setup-choices {
  display: grid;
  gap: 10px;
}
.setup-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.setup-choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--nav-active-bg);
}
.setup-choice input {
  margin-top: 3px;
}
.setup-choice span {
  display: grid;
  gap: 2px;
}
.setup-choice small {
  color: var(--muted);
  font-size: 13px;
}
.setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.setup-comfort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}
.setup-ready {
  display: grid;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  font-size: 15px;
  list-style: none;
}
.setup-ready li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.setup-ready svg {
  flex-shrink: 0;
  color: var(--primary);
}
.setup-start-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.confetti {
  position: fixed;
  inset: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.setup-upgrade {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.setup-upgrade h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.setup-upgrade p {
  margin: 0;
  color: var(--muted);
}
.setup-upgrade ul {
  margin: 0 0 8px;
  padding-left: 18px;
}
.setup-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 20px;
  padding: 12px 18px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--nav-active-bg);
}
.setup-nudge > a {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  gap: 4px 14px;
  min-width: 240px;
  color: var(--nav-active);
}
@media (max-width: 1000px) {
  .setup {
    grid-template-columns: minmax(0, 1fr);
  }
  .setup-questions {
    order: -1;
    padding: 32px 24px;
  }
  .setup-stage {
    position: static;
    height: auto;
    padding: 32px 24px;
  }
  .setup-stage .wordmark {
    display: none;
  }
  .setup-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .sheet {
    margin-inline: auto;
    padding: 28px 24px;
    transform: none;
  }
}
.billing {
  display: grid;
  gap: 20px;
}
.billing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.billing-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
}
.billing-plan.is-current {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.billing-plan h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
}
.billing-plan p {
  margin: 0;
}
.billing-price strong {
  color: var(--ink);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.billing-plan > button,
.billing-plan > .badge {
  margin-top: auto;
}
.billing-plan > :is(button, .badge):last-child {
  margin-top: 16px;
}
.billing-excluded {
  font-size: 13px;
}
.release-notice {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 30px rgb(13 27 51 / 18%);
  transform: translateX(-50%);
}
.billing-empty {
  margin: 0;
  padding: 24px;
  color: var(--muted);
}
.member-email {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.member-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  white-space: normal;
}
.member-chip {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--chip-draft-bg);
  color: var(--chip-draft);
  font-size: 12px;
  font-weight: 600;
}
.member-chip.all {
  background: var(--nav-active-bg);
  color: var(--nav-active);
}
.member-actions {
  text-align: right;
  white-space: nowrap;
}
.member-form {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 40px;
}
.member-rights {
  display: grid;
  min-width: 0;
  gap: 20px;
}
dialog.wide.member-dialog {
  width: 1120px;
}
dialog.member-dialog .dialog-footer {
  padding-top: 16px;
}
.member-details {
  display: grid;
  gap: 14px;
}
.member-names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.member-copy-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.member-pages {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.member-pages-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.member-pages legend {
  display: contents;
  font-size: 13px;
  font-weight: 600;
}
.member-pages-toggle {
  min-height: 0;
  padding: 2px 8px;
  font-size: 12px;
}
.member-page,
.member-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 64px;
  align-items: center;
  gap: 8px;
}
.member-page {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.member-page-head {
  padding-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.member-box {
  display: flex;
  justify-content: center;
  padding: 6px 0;
  cursor: pointer;
}
.member-page > span {
  display: grid;
}
.member-page small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
dialog.wide.matrix-dialog {
  width: 1560px;
}
.matrix {
  display: grid;
  gap: 16px;
}
.matrix-scroll {
  overflow: auto;
  max-height: calc(100dvh - 320px);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.rights-matrix {
  width: 100%;
  min-width: 1320px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.rights-matrix th,
.rights-matrix td {
  padding: 11px 6px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rights-matrix input[type="checkbox"] {
  display: inline-block;
  width: 18px;
  margin: 0;
  vertical-align: middle;
}
.rights-matrix .matrix-first {
  border-left: 1px solid var(--line);
}
.rights-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 600;
}
.rights-matrix thead tr:first-child th {
  height: 42px;
  box-sizing: border-box;
}
.rights-matrix .matrix-letters th {
  top: 42px;
  color: var(--muted);
  font-weight: 500;
}
.rights-matrix thead tr:first-child th:first-child {
  width: 250px;
  z-index: 3;
}
.rights-matrix tr:first-child th:first-child,
.rights-matrix tbody th {
  position: sticky;
  left: 0;
  padding-left: 14px;
  font-weight: 500;
  text-align: left;
}
.rights-matrix tbody th {
  z-index: 1;
}
.matrix-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.matrix-person span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rights-matrix tbody tr:last-child > * {
  border-bottom: 0;
}
.rights-matrix small {
  flex: none;
  color: var(--muted);
  font-weight: 400;
}
.rights-matrix tr.is-inactive th {
  color: var(--muted);
}
.matrix-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
}
.matrix-bulk-arrow {
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}
.matrix-bulk select {
  width: auto;
  min-width: 220px;
}
.matrix-bulk-hint {
  color: var(--muted);
  font-size: 12px;
}
.member-seat-note p { margin: 0 0 4px; }
.member-seats { margin: 0 0 12px; color: var(--muted, #667); }
.members-table tr.is-inactive td { opacity: .6; }
.member-filters { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.member-filters .search { flex: 1; margin-bottom: 0; }
.member-waiting { display: block; margin-bottom: 12px; }
.member-active {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 620px) {
  .member-form,
  .member-names {
    grid-template-columns: minmax(0, 1fr);
  }
}
.demo-explanation {
  display: grid;
  gap: 10px;
}
.demo-explanation p {
  margin: 0;
}
.demo-toast {
  inset: auto 25px 25px auto;
  align-items: center;
  gap: 10px;
  max-width: min(500px, calc(100vw - 50px));
  margin: 0;
  padding: 14px 18px;
  border: 1px solid #d13b1f;
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 30px rgb(13 27 51 / 18%);
  cursor: pointer;
}
.demo-toast:popover-open {
  display: flex;
}
.demo-toast svg {
  flex-shrink: 0;
  color: #d13b1f;
}
:root[data-demo] .sidebar,
:root[data-archive] .sidebar {
  top: var(--demo-bar);
  height: calc(100dvh - var(--demo-bar));
}
:root[data-demo] .shell,
:root[data-archive] .shell {
  box-sizing: border-box;
  padding-top: var(--demo-bar);
}
:root[data-demo] .main,
:root[data-archive] .main {
  height: calc(100dvh - var(--demo-bar));
}
@media print {
  .demo-bar {
    display: none;
  }
  :root[data-demo] .shell,
  :root[data-archive] .shell {
    padding-top: 0;
  }
  :root[data-demo] .main,
  :root[data-archive] .main {
    height: auto;
  }
}
/* Menu text stays on one line, however narrow the sidebar is or is becoming. */
.nav-label,
.nav-group-label,
.profile-details small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  margin-bottom: 6px;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition:
    background-color 0.12s ease-out,
    color 0.12s ease-out;
}
.nav-collapse > svg {
  flex-shrink: 0;
}
.nav-collapse:hover {
  background: var(--nav-hover);
  color: var(--ink);
}
.profile {
  border-radius: 6px;
  background: var(--surface);
}
.profile-open {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  text-align: left;
}
.profile-open > svg {
  flex-shrink: 0;
  color: var(--chevron);
}
.avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  font-weight: 700;
}
.profile-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.profile-details > span {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-details small {
  font-size: 12px;
}
.account-menu {
  position: fixed;
  inset: auto auto 84px 16px;
  width: 200px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 10px 36px rgb(5 15 35 / 12%);
}
.account-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--ink);
}
.account-menu a:hover {
  background: var(--nav-hover);
}
.account-menu a:last-child {
  margin-top: 6px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 6px 6px;
}
.main {
  height: 100dvh;
  min-height: 0;
  margin-left: 232px;
  /* The scrollbar is always there, also when a page fits: going from a short page to a long one
     never moves the content sideways (17px on Windows). */
  overflow-x: auto;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: var(--surface);
}
#page {
  min-height: 100%;
  max-width: 1320px;
  margin-inline: auto;
}
#page > .page-head {
  padding: 36px 40px 0;
}
.page-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 40px 40px;
}
.page-body > * {
  min-width: 0;
}
/* Overview and the settings index breathe; list pages stay dense. */
/* Roomier between the cards only: the title and the content's edges stand where every other
   page has them, so going from the overview to any page moves nothing. */
#page[data-layout="roomy"] > .page-head {
  padding: 36px 40px 0;
}
#page[data-layout="roomy"] .page-body {
  gap: 32px;
  padding: 32px 40px 64px;
}
.page-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.page-head > div:first-child {
  min-width: 0;
}
/* The page's buttons stand at the right, also when they wrap to a second row. */
.page-head > .actions {
  justify-content: flex-end;
}
.page-head p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
}
.page-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
/* A title with its way back beside it (settings pages, a deal): small and grey, on the title's line. */
.page-title-row.title-with-back {
  align-items: baseline;
  column-gap: 14px;
}
.title-with-back .settings-back {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.title-with-back .settings-back:hover {
  color: var(--ink);
}
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
}
.breadcrumb a {
  color: var(--muted);
}
.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--secondary-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  transition:
    background-color 0.12s ease-out,
    color 0.12s ease-out;
}
.button:hover {
  background: var(--hover);
}
.button svg {
  flex-shrink: 0;
}
.button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-ink);
}
.button.primary:hover {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
}
.button.quiet,
.button.text {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
.button.danger {
  color: var(--overdue);
}
.button.small,
.data-table td .button {
  padding: 7px 12px;
  font-size: 13px;
}
.button.icon-only {
  padding: 9px;
  font-size: 0;
}
.button.disabled {
  opacity: 0.45;
  cursor: default;
}
.button.mobile-menu {
  display: none;
}

/* Cards */
.card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 22px 26px 10px;
}
.card-header > .button {
  padding: 7px 12px;
  font-size: 13px;
}
.card-header > a:not(.button),
.card-meta {
  color: var(--link);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.card-body {
  padding: 8px 26px 26px;
}
.card-rows {
  padding-bottom: 8px;
}
.card-rows > * {
  border-top: 1px solid var(--line);
}
.card-empty {
  padding: 28px 26px 34px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}

/* Key figures: one strip, equal cells */
.kpis {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 22px 26px;
  border-left: 1px solid var(--line);
}
.kpi:first-child {
  border-left: 0;
}
.kpi p {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.kpi strong {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kpi small {
  font-size: 13px;
}
.status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot-neutral);
}
.status-dot.progress {
  background: var(--dot-progress);
}
.status-dot.attention {
  background: var(--dot-attention);
}

/* Overview */
.overview-dashboard {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px;
}
.task-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 110px 104px;
  align-items: center;
  gap: 16px;
  padding: 14px 26px;
}
.task-row .status-dot {
  width: 8px;
  height: 8px;
}
.row-title {
  display: block;
  font-weight: 600;
}
.row-note {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.task-amount {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.task-row .button {
  justify-self: end;
}
.waiting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 100px;
  align-items: center;
  gap: 16px;
  padding: 13px 26px;
  color: var(--ink);
  transition: background-color 0.12s ease-out;
}
.waiting-row:hover,
.activity-row:hover {
  background: var(--hover);
  text-decoration: none;
}
.waiting-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.waiting-name small {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
}
.waiting-due {
  color: var(--muted);
  font-size: 13px;
}
.waiting-due.overdue {
  color: var(--overdue);
  font-weight: 700;
}
.waiting-amount {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 26px;
  color: var(--ink);
  font-weight: 500;
  transition: background-color 0.12s ease-out;
}
.activity-row > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-row small {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 400;
}
.chart {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-inline: auto;
}
.chart text {
  fill: var(--muted);
  font-size: 12px;
  text-anchor: middle;
}
.chart .chart-axis {
  stroke: var(--chart-axis);
}
.chart .bar-income {
  fill: var(--chart-income);
}
.chart .bar-expenses {
  fill: var(--chart-expenses);
}
.chart-readout {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 40px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.chart-readout strong {
  color: var(--ink);
}
.chart-readout .positive {
  color: var(--positive);
}
.chart-readout .negative {
  color: var(--negative);
}
.chart .chart-month {
  outline: none;
  cursor: default;
}
.chart .chart-column {
  fill: transparent;
  transition: fill 0.15s;
}
.chart .chart-month.active .chart-column {
  fill: var(--chart-column-active);
}
.chart .chart-month:focus-visible .chart-column {
  stroke: var(--focus);
  stroke-width: 2;
}
.chart .bar-income {
  transition: fill 0.15s;
}
.chart .chart-month.active .bar-income {
  fill: var(--chart-income-active);
}
.chart .chart-month.active text {
  fill: var(--ink);
  font-weight: 600;
}
.legend {
  display: flex;
  gap: 16px;
  padding-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.legend span:before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  background: var(--chart-income);
  vertical-align: -1px;
}
.legend span + span:before {
  background: var(--chart-expenses);
}

/* Tables. No intermediate overflow containers: headers stick to the right pane. */
.table-wrap {
  overflow: auto;
}
.main .card:has(.data-table),
.main .table-wrap {
  overflow: visible;
}
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  white-space: nowrap;
}
.data-table th {
  padding: 11px 7px;
  background: var(--subtle);
  border-bottom: 1px solid var(--table-line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.main .data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.data-table td {
  padding: 10px 7px;
  border-bottom: 1px solid var(--divider);
  font-size: 14px;
}
.data-table th:first-child,
.data-table td:first-child {
  padding-left: 20px;
}
.data-table th:last-child,
.data-table td:last-child {
  padding-right: 20px;
}
.data-table tbody tr:last-child td {
  border-bottom: 0;
}
.data-table tbody tr {
  transition: background-color 0.12s ease-out;
}
.data-table tbody tr:hover {
  background: var(--hover);
}
.data-table td:first-child {
  font-weight: 600;
}
/* Rounded table inside a card: the header's corners follow the card. */
.card > .data-table thead tr:first-child th:first-child,
.card > .table-wrap:first-child .data-table th:first-child,
.card > div:first-child > .table-wrap .data-table th:first-child {
  border-top-left-radius: 9px;
}
.card > .data-table thead tr:first-child th:last-child,
.card > .table-wrap:first-child .data-table th:last-child,
.card > div:first-child > .table-wrap .data-table th:last-child {
  border-top-right-radius: 9px;
}
.numeric,
.data-table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.amount {
  font-variant-numeric: tabular-nums;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--divider);
  color: var(--muted);
  flex-wrap: wrap;
}
.pagination .button {
  padding: 7px 12px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
.pagination .button:hover {
  background: var(--icon-hover);
  color: var(--ink);
}
.pagination .button.disabled:hover {
  background: transparent;
  color: var(--muted);
}
.pagination .button.primary {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
}
.pagination .actions {
  gap: 4px;
}
.pagination .field {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}
.pagination select {
  width: auto;
  min-height: 34px;
  padding: 5px 30px 5px 10px;
}
/* A pagination with no card around it still reads as the table's footer. */
.page-body > .pagination {
  border-top: 0;
  padding: 0 4px;
}

/* Chips */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--chip-draft-bg);
  color: var(--chip-draft);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
/* In a table every pill fills a shrink-to-fit column: equal widths in any language. */
td:has(> .badge) {
  width: 1%;
}
td > .badge {
  display: block;
  min-width: 96px;
  text-align: center;
}
.badge.open,
.badge.pending_payment,
.badge.sent {
  background: var(--chip-open-bg);
  color: var(--chip-open);
}
.badge.paid,
.badge.accepted,
.badge.active,
.badge.processed,
.badge.billed {
  background: var(--chip-paid-bg);
  color: var(--chip-paid);
}
.badge.late,
.badge.overdue,
.badge.reminded,
.badge.rejected,
.badge.uncollectible,
.badge.unprocessed {
  background: var(--chip-late-bg);
  color: var(--chip-late);
}
.tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--icon-hover);
  color: var(--chip-draft);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}

/* Filter panel: every list page */
.toolbar,
.report-filters,
.audit-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
  background: var(--subtle);
  border: 1px solid var(--input-line);
  border-radius: 6px;
}
.toolbar > .actions:empty {
  display: none;
}
.toolbar > .actions {
  margin-left: auto;
}
.toolbar > .field,
.report-filters > .field {
  flex: 1 1 150px;
  min-width: 130px;
}
.toolbar select {
  width: 100%;
}
.search {
  display: flex;
  flex: 2 1 280px;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}
/* A search on its own sits in the page's column, where flex would stretch it tall. */
.page-body > .search {
  flex: none;
}
.search > .field,
.search > input {
  flex: 1;
  min-width: 0;
}
.search input {
  width: 100%;
}
.search .button {
  padding: 10px 12px;
}
.report-filters > .field:first-child {
  flex-grow: 2;
}
.audit-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}
.invoice-filters {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
  padding: 14px;
  background: var(--subtle);
  border: 1px solid var(--input-line);
  border-radius: 6px;
}
.invoice-filters .field {
  margin: 0;
}
.invoice-filters .actions {
  flex-wrap: nowrap;
}
.invoice-clear-slot {
  display: flex;
}
.invoice-clear-slot .button {
  padding: 11px 6px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
.invoice-clear-slot .invoice-clear-active {
  color: var(--link);
}
.invoice-clear-slot button:disabled {
  cursor: default;
}
input.applied,
select.applied,
.invoice-status-trigger.applied,
.date-range-trigger.active {
  box-shadow: inset 0 0 0 1.5px var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}
.work-queue-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 16px;
  background: var(--subtle);
  border-radius: 6px;
  font-size: 13px;
}
.note {
  padding: 14px 16px;
  background: var(--subtle);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
}
.note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}
.card-body > .note,
.card > .note {
  margin: 12px 0;
}

/* Forms */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
}
.field small {
  font-size: 12px;
  font-weight: 400;
}
input,
select,
textarea {
  min-width: 0;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--input-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
  border-color: var(--primary);
}
input:not([type="checkbox"], [type="radio"], [type="file"]),
select,
.invoice-status-trigger,
.date-range-trigger {
  min-height: 42px;
}
select:not([multiple]) {
  padding-right: 34px;
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2388909c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    right 12px center / 14px no-repeat;
  appearance: none;
}
textarea {
  min-height: 110px;
  resize: vertical;
}
input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--secondary-line);
  border-radius: 4px;
  background: var(--surface) center / 14px no-repeat;
  vertical-align: middle;
  appearance: none;
  cursor: pointer;
}
input[type="checkbox"]:checked {
  border-color: var(--primary);
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E");
}
input[type="checkbox"]:indeterminate {
  border-color: var(--primary);
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: default;
}
.field input[type="checkbox"] {
  align-self: flex-start;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field.wide {
  grid-column: 1/-1;
}
.form-error {
  margin-bottom: 12px;
  color: var(--overdue);
  font-size: 13px;
}
.form-error:empty {
  display: none;
}
.upload-error {
  margin: 6px 0;
  color: var(--overdue);
  font-size: 13px;
}
.upload-error:empty {
  display: none;
}

/* Settings index */
#page[data-layout="roomy"] .settings-index {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.settings-group {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
}
.settings-group-intro h2 {
  font-size: 16px;
}
.settings-group-intro p {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.5;
  text-wrap: pretty;
}
.settings-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.settings-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background-color 0.12s ease-out;
}
.settings-tile:nth-child(odd) {
  border-right: 1px solid var(--line);
}
.settings-tile:last-child,
.settings-tile:nth-child(odd):nth-last-child(2) {
  border-bottom: 0;
}
.settings-tile:hover {
  background: var(--hover);
}
.settings-tile:focus-visible {
  outline-offset: -2px;
}
.settings-tile > div {
  flex: 1;
  min-width: 0;
}
.settings-tile p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.settings-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--tile-bg);
  color: var(--tile-ink);
}
.settings-chevron {
  flex-shrink: 0;
  color: var(--tile-ink);
  font-size: 16px;
  line-height: 1;
}
:root[data-theme="dark"] .settings-tile {
  --tile-dark-ink: var(--tile-bg);
}
:root[data-theme="dark"] .settings-icon {
  background: color-mix(in srgb, var(--tile-ink) 55%, var(--surface));
  color: var(--tile-dark-ink);
}
:root[data-theme="dark"] .settings-chevron {
  color: var(--tile-dark-ink);
}
/* Settings tiles: a rainbow from top to bottom, in the order they appear (left, then right).
   Hues evenly spaced from red to pink; a new tile goes in its place in this list. */
[data-tile="business"] {
  --tile-bg: #fed2d0;
  --tile-ink: #913b3e;
}
[data-tile="members"] {
  --tile-bg: #fed3c7;
  --tile-ink: #903e29;
}
[data-tile="audit"] {
  --tile-bg: #ffd4bc;
  --tile-ink: #8c440d;
}
[data-tile="quotes"] {
  --tile-bg: #f9d7b6;
  --tile-ink: #814d02;
}
[data-tile="invoices"] {
  --tile-bg: #f2dbb3;
  --tile-ink: #765403;
}
[data-tile="products"] {
  --tile-bg: #e9deb3;
  --tile-ink: #6b5a02;
}
[data-tile="e-invoices"] {
  --tile-bg: #dfe2b6;
  --tile-ink: #5e5f02;
}
[data-tile="recurring"] {
  --tile-bg: #d5e5bc;
  --tile-ink: #4b6506;
}
[data-tile="periods"] {
  --tile-bg: #cae8c4;
  --tile-ink: #326a26;
}
[data-tile="reports"] {
  --tile-bg: #c0eace;
  --tile-ink: #056d3d;
}
[data-tile="accounts"] {
  --tile-bg: #b9ebd8;
  --tile-ink: #036b53;
}
[data-tile="bank-connections"] {
  --tile-bg: #b3ebe3;
  --tile-ink: #036961;
}
[data-tile="ledger"] {
  --tile-bg: #b1eaed;
  --tile-ink: #08686c;
}
[data-tile="assets"] {
  --tile-bg: #b3e9f6;
  --tile-ink: #046677;
}
[data-tile="supplier-payments"] {
  --tile-bg: #b7e6fd;
  --tile-ink: #046484;
}
[data-tile="taxes"] {
  --tile-bg: #c2e3ff;
  --tile-ink: #035f97;
}
[data-tile="setup"] {
  --tile-bg: #ccdfff;
  --tile-ink: #31599b;
}
[data-tile="billing"] {
  --tile-bg: #d4dcff;
  --tile-ink: #48539b;
}
[data-tile="tags"] {
  --tile-bg: #dcd6ff;
  --tile-ink: #55489b;
}
[data-tile="playbooks"] {
  --tile-bg: #dcd9fe;
  --tile-ink: #5a4d97;
}
[data-tile="activity"] {
  --tile-bg: #e6d5fe;
  --tile-ink: #6a488f;
}
[data-tile="playbooks/templates"] {
  --tile-bg: #efd2f7;
  --tile-ink: #764383;
}
[data-tile="api"] {
  --tile-bg: #f7d0ee;
  --tile-ink: #813f75;
}
[data-tile="jobs"] {
  --tile-bg: #fdcfe4;
  --tile-ink: #883c65;
}

/* Settings forms: section title left, fields in a card right */
.business-fields,
.profile-fields,
.editor-fields {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.business-fields {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.business-section {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  min-width: 0;
}
.business-section > h2 {
  font-size: 16px;
}
.business-section-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.business-section input,
.business-section select,
.business-section textarea {
  width: 100%;
}
.business-section textarea {
  min-height: 70px;
}
.business-section .three-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.save-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.save-bar .form-error {
  flex: 1 1 260px;
  margin: 0;
}
/* A long form keeps its save button in view: the bar sticks to the bottom of the screen. */
.business-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 0 -16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
}
.save-bar-status {
  margin-right: auto;
  color: var(--muted);
  font-size: 13px;
}
.business-brand-color {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.business-brand-label {
  font-weight: 600;
  font-size: 13px;
}
.business-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.business-brand-row .qb-swatch {
  width: 34px;
  height: 34px;
}
.business-brand-state {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.business-logo-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px dashed var(--secondary-line);
  border-radius: 6px;
  background: var(--subtle);
  cursor: pointer;
  transition: background-color 0.12s ease-out;
}
.business-logo-drop:hover,
.business-logo-drop.drag-over {
  background: var(--nav-hover);
}
.business-logo-drop.drag-over,
.business-logo-drop:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.business-section .business-logo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
}
.business-logo-preview {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 76px;
  height: 54px;
  padding: 6px;
  border-radius: 4px;
  background: #fff;
  color: #637699;
  font-size: 11px;
}
.business-logo-preview img {
  max-width: 100%;
  max-height: 42px;
  object-fit: contain;
}
.business-logo-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 13px;
}
.business-logo-copy small {
  font-size: 12px;
}
.business-logo-name {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.business-logo-name:empty {
  display: none;
}
.business-logo .button {
  padding: 6px 0;
  font-size: 13px;
}
.business-logo [hidden] {
  display: none;
}
.profile-form {
  padding: 8px 26px 26px;
}
.profile-fields {
  display: grid;
  gap: 18px;
}
.profile-fields > button {
  justify-self: end;
}
.page-body > .card:has(.profile-form) {
  max-width: 780px;
}

/* Dialogs */
dialog {
  width: 540px;
  max-width: calc(100vw - 28px);
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 70px rgb(13 27 51 / 18%);
}
dialog.wide {
  width: 930px;
}
/* A popup puts the page behind it out of focus. */
dialog::backdrop {
  background: rgb(23 33 53 / 28%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
dialog form {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 42px);
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 26px 0;
}
.dialog-header h2 {
  font-size: 18px;
}
.dialog-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}
.dialog-header .button.icon-only {
  border-color: transparent;
}
.dialog-body {
  overflow: auto;
  padding: 20px 26px;
}
.dialog-footer {
  padding: 0 26px 26px;
}
.dialog-footer .actions {
  justify-content: flex-end;
}
.tenner-stepup {
  width: min(480px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.tenner-stepup::backdrop {
  background: rgb(23 33 53 / 40%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.tenner-stepup input {
  width: 100%;
}
/* The core puts its buttons straight in the footer, without the .actions wrapper. */
.tenner-stepup .dialog-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.tenner-stepup .platform-stepup__passkey {
  margin-right: auto;
}
.tenner-stepup .platform-stepup__link {
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--link);
  text-align: left;
}

/* Search and go to */
.palette {
  width: 560px;
  margin-top: 12vh;
  overflow: hidden;
}
.palette-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.palette-input input {
  flex: 1;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 15px;
}
.palette-input input:focus-visible {
  outline: 0;
}
.palette-results {
  max-height: 50vh;
  overflow: auto;
  padding: 8px;
}
.palette-results a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--ink);
}
.palette-results a > svg {
  flex-shrink: 0;
  color: var(--icon);
}
.palette-results a:hover,
.palette-results a.selected {
  background: var(--nav-active-bg);
  text-decoration: none;
}
.palette-empty {
  padding: 18px 12px;
  color: var(--muted);
  text-align: center;
}

/* Detail pages: content left, metadata right */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  align-items: start;
  gap: 24px;
}
.detail-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.detail-side .card-header {
  flex-wrap: wrap;
  padding: 18px 20px 10px;
}
.main .detail-side .card {
  overflow: hidden;
}
.main .detail-side .table-wrap {
  overflow: auto;
}
.detail-side .data-table {
  white-space: normal;
}
.main .detail-side .data-table th {
  position: static;
}
.detail-side .data-table th,
.detail-side .data-table td {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 13px;
}
.detail-side .amount {
  white-space: nowrap;
}
.detail-side .data-table td .button {
  padding: 6px 8px;
}
.detail-side .data-table th:first-child,
.detail-side .data-table td:first-child {
  padding-left: 20px;
}
.detail-side .data-table th:last-child,
.detail-side .data-table td:last-child {
  padding-right: 14px;
}
.detail-side .card-body {
  padding: 4px 20px 20px;
}
.invoice-sheet {
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.invoice-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.invoice-parties {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 26px 0;
}
.invoice-parties p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.invoice-sheet .data-table th {
  border-radius: 0;
}
.invoice-totals {
  max-width: 280px;
  margin: 24px 0 0 auto;
}
.total-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-variant-numeric: tabular-nums;
}
.total-row.grand {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 18px;
  font-weight: 600;
}
.file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 20px 20px;
}

/* Document editor */
.document-editor {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.document-editor > .card {
  padding: clamp(18px, 3vw, 26px);
}
.editor-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px 0;
}
.editor-footer .form-error {
  flex: 1 1 260px;
}
.line-editor {
  margin-top: 24px;
}
.line-row {
  margin: 12px 0;
  padding: 14px;
  background: var(--subtle);
  border: 1px solid var(--input-line);
  border-radius: 6px;
}
.line-fields {
  display: grid;
  grid-template-columns: 3fr 1fr 1.4fr;
  gap: 12px;
}
.line-fields.secondary {
  grid-template-columns: 1fr 1fr auto;
  margin-top: 12px;
}

/* Empty, loading and message states */
.empty {
  padding: 40px 20px;
  color: var(--muted);
  text-align: center;
}
.empty h3 {
  font-weight: 400;
}
.empty .button {
  margin-top: 16px;
}
.empty .button.primary {
  border-color: var(--secondary-line);
  background: var(--surface);
  color: var(--ink);
}
.empty .button.primary:hover {
  background: var(--hover);
}
.loading {
  padding: 60px;
  color: var(--muted);
  text-align: center;
}
.opening {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 100vh;
  max-height: 100dvh;
  overflow: auto;
  background: var(--sidebar);
}
.opening p {
  color: var(--muted);
}
.opening .card {
  max-width: 480px;
  padding: 36px;
  text-align: center;
}
.opening .card p {
  margin: 14px 0 24px;
}
.opening .choice {
  display: block;
  margin-top: 10px;
}
.toast {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(500px, calc(100vw - 50px));
  padding: 14px 18px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--surface);
  box-shadow: 0 8px 30px rgb(13 27 51 / 18%);
}
.toast.error {
  background: #8e3019;
  color: #fff;
}
.navigation-error {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 16px;
  transform: translateX(-50%);
  border: 1px solid var(--chip-late-bg);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 40px rgb(13 27 51 / 14%);
}

/* Audit and integrations */
.audit-json {
  max-width: 420px;
  max-height: 320px;
  overflow: auto;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.page-body:has(.bank-connect-actions) .card-body > p {
  margin-bottom: 8px;
}
.page-body:has(.bank-connect-actions) .card-body > .actions {
  margin-top: 16px;
}
.provider-sync-status {
  margin: 16px 0;
}
.provider-sync-status p {
  margin-bottom: 8px;
}

/* Invoice list */
.invoice-table thead th {
  height: 42px;
  vertical-align: middle;
  padding-top: 0;
  padding-bottom: 0;
}
.invoice-table th:first-child,
.invoice-table td:first-child {
  width: 44px;
  min-width: 44px;
  padding-right: 0;
}
.invoice-table td a {
  color: var(--ink);
}
.document-name {
  display: inline-flex;
  align-items: center;
  max-width: 340px;
}
.document-name a,
.invoice-table .document-name a {
  overflow: hidden;
  color: var(--link);
  font-weight: 600;
  text-overflow: ellipsis;
}
.invoice-table .date-cell {
  color: var(--muted);
}
.invoice-table .due-alert {
  color: var(--overdue);
  font-weight: 700;
}
.invoice-table .outstanding {
  font-weight: 700;
}
.bulk-check {
  margin: 0;
}
.bulk-table tr.selected > td {
  background: var(--subtle);
}
.bulk-table thead tr.selecting th {
  background: var(--subtle);
}
.bulk-table thead tr.selecting .bulk-th-label {
  visibility: hidden;
}
.bulk-toolbar {
  position: absolute;
  inset: 0 auto 0 7px;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 8px;
  width: max-content;
  background: var(--subtle);
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
}
.bulk-table thead tr.selecting .bulk-toolbar {
  display: flex;
}
.bulk-toolbar-count {
  margin-right: 6px;
  font-weight: 600;
  white-space: nowrap;
}
.bulk-toolbar .button {
  padding: 5px 10px;
  font-size: 13px;
}
.bulk-toolbar-clear {
  border: 0;
  background: transparent;
}
.invoice-table thead tr.selecting th:nth-child(2),
.bulk-table thead tr.selecting th:nth-child(2),
.deal-table thead tr.selecting th:nth-child(2) {
  z-index: 4;
}
.invoice-filter-group {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.invoice-filter-children {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}
.invoice-filter-condition {
  display: flex;
  align-items: center;
  gap: 10px;
}
.invoice-filter-condition > select {
  flex: 1;
  min-width: 0;
}
.invoice-filter-value {
  display: flex;
  flex: 2;
  gap: 10px;
  min-width: 0;
}
.invoice-filter-value > * {
  flex: 1;
  min-width: 0;
}
.invoice-filter-value input[hidden] {
  display: none;
}
.invoice-status-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--input-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.invoice-status-caption {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-status-trigger > svg {
  flex-shrink: 0;
  transform: rotate(90deg);
}
.invoice-status-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.invoice-status-dot.all {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--muted);
}
.invoice-status-dot.open,
.invoice-status-dot.outstanding,
.invoice-status-dot.mixed {
  background: var(--dot-progress);
}
.invoice-status-dot.reminded {
  background: var(--dot-attention);
}
.invoice-status-dot.late,
.invoice-status-dot.overdue,
.invoice-status-dot.uncollectible {
  background: var(--overdue);
}
.invoice-status-dot.credit {
  background: var(--muted);
}
.invoice-status-dot.paid {
  background: var(--positive);
}
.invoice-status-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 20px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 14px 44px rgb(5 15 35 / 14%);
}
td.invoice-status-cell > .badge {
  display: inline-block;
}
.invoice-fact {
  margin-left: 8px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.invoice-status-columns {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 24px;
}
.invoice-status-columns fieldset {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.invoice-status-columns fieldset:first-child {
  padding-right: 24px;
  border-right: 1px solid var(--line);
}
.invoice-status-columns legend {
  margin-bottom: 10px;
  padding: 0 10px;
  color: var(--nav-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.invoice-status-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
.invoice-status-option.selected {
  background: var(--subtle);
  font-weight: 600;
}
.invoice-status-option:hover {
  background: var(--nav-hover);
}
.invoice-status-option:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.invoice-status-option input[type="checkbox"] {
  align-self: center;
}
.invoice-status-menu footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.invoice-status-menu footer small {
  font-size: 12px;
  font-weight: 400;
}
.invoice-status-menu footer .button {
  padding: 7px 12px;
  font-size: 13px;
}
/* "All statuses": a link that clears the choice. */
.filter-menu-reset {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.filter-menu-reset:hover:not(:disabled) {
  text-decoration: underline;
}
.filter-menu-reset:disabled {
  color: var(--muted);
  cursor: default;
}

/* Touch: every control reachable with a finger */
@media (pointer: coarse) {
  .icon-button,
  .theme-toggle {
    width: 40px;
    height: 40px;
  }
  .brand-row {
    padding-left: 8px;
  }
}

@media (max-width: 1240px) {
  #page[data-layout="roomy"] > .page-head {
    padding: 36px 40px 0;
  }
  #page[data-layout="roomy"] .page-body {
    padding: 24px 40px 40px;
  }
  .settings-group,
  .business-section {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
  }
  .kpi {
    padding: 18px 20px;
  }
  .kpi strong {
    font-size: 22px;
  }
  .task-row {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    padding-inline: 20px;
  }
  .task-row .task-amount {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
  .task-row .button {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .waiting-row,
  .activity-row {
    padding-inline: 20px;
  }
  .card-header {
    padding-inline: 20px;
  }
  .invoice-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .invoice-filters > :first-child {
    grid-column: 1 / -1;
  }
  .detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1100px) {
  .overview-grid,
  .settings-group,
  .business-section {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-group,
  .business-section {
    gap: 14px;
  }
  .task-row {
    grid-template-columns: 10px minmax(0, 1fr) 110px 104px;
  }
  .task-row .task-amount,
  .task-row .button {
    grid-column: auto;
    grid-row: auto;
    text-align: right;
  }
}
/* iPad landscape and small laptops: the whole navigation fits without scrolling. */
@media (max-height: 820px) and (min-width: 761px) {
  .sidebar {
    gap: 14px;
    padding-top: 18px;
    padding-bottom: 12px;
  }
  .sidebar > .nav {
    gap: 8px;
  }
  .nav a {
    padding-block: 7px;
  }
}
/* Small laptops: long names truncate before the table outgrows the pane. */
@media (max-width: 1360px) and (min-width: 761px) {
  .invoice-table .document-name {
    max-width: 200px;
  }
  .invoice-table td:nth-child(3) a {
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}
@media (max-width: 1240px) and (min-width: 761px) {
  /* iPad: the table fits the pane. Due date stays, invoice date gives way. */
  .invoice-fact {
    display: block;
    margin: 3px 0 0;
  }
  .invoice-table th:nth-child(4),
  .invoice-table td:nth-child(4) {
    display: none;
  }
  .invoice-table td,
  .invoice-table th {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 13px;
  }
  .invoice-table .document-name {
    max-width: 150px;
  }
  .invoice-table td:nth-child(3) a {
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
  .invoice-table .tag {
    display: none;
  }
}
@media (max-width: 1000px) {
  .sidebar {
    width: 208px;
    padding-inline: 12px;
  }
  .main {
    margin-left: 208px;
  }
  .account-menu {
    left: 12px;
    width: 184px;
  }
  #page > .page-head,
  #page[data-layout="roomy"] > .page-head {
    padding: 26px 26px 0;
  }
  .page-body,
  #page[data-layout="roomy"] .page-body {
    padding: 22px 26px 32px;
  }
  .kpis {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpi:nth-child(odd) {
    border-left: 0;
  }
  .kpi:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .audit-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Collapsed sidebar: a rail of icons. Screen only, so printing stays as it is. */
@media screen and (min-width: 761px) {
  .sidebar {
    transition:
      width 0.18s ease-out,
      padding 0.18s ease-out;
  }
  .main {
    transition: margin-left 0.18s ease-out;
  }
  .shell[data-collapsed="true"] .sidebar {
    align-items: stretch;
    width: 72px;
    padding-inline: 12px;
  }
  .shell[data-collapsed="true"] .main {
    margin-left: 72px;
  }
  .shell[data-collapsed="true"] .brand-row {
    flex-direction: column;
    gap: 8px;
    padding: 0;
  }
  .shell[data-collapsed="true"] .brand-row .wordmark {
    display: none;
  }
  .shell[data-collapsed="true"] .brand-mark {
    display: block;
    border-radius: 8px;
  }
  .shell[data-collapsed="true"] .brand-actions {
    flex-direction: column;
    align-items: center;
  }
  .shell[data-collapsed="true"] .workspace {
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
  }
  /* The whole badge is the native picker: tapping it opens the list. */
  .shell[data-collapsed="true"] .workspace select:not([multiple]) {
    position: absolute;
    inset: 0;
    padding: 0;
    opacity: 0;
  }
  .shell[data-collapsed="true"] .workspace-chevron,
  .shell[data-collapsed="true"] .nav-group-label,
  .shell[data-collapsed="true"] .profile-details,
  .shell[data-collapsed="true"] .profile-open > svg {
    display: none;
  }
  .shell[data-collapsed="true"] .sidebar > .nav {
    scrollbar-width: none;
  }
  .shell[data-collapsed="true"] .nav-group + .nav-group {
    padding-top: 10px;
    border-top: 1px solid var(--sidebar-line);
  }
  .shell[data-collapsed="true"] .nav a,
  .shell[data-collapsed="true"] .nav-collapse {
    position: relative;
    justify-content: center;
    min-height: 40px;
    padding: 0;
  }
  /* Out of sight, still read out by a screen reader. */
  .shell[data-collapsed="true"] .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .shell[data-collapsed="true"] .profile-open {
    justify-content: center;
    padding: 6px 0;
  }
  .shell[data-collapsed="true"] .account-menu {
    inset: auto auto 16px 80px;
    width: 200px;
  }
}
@media (max-width: 760px) {
  .nav-collapse {
    display: none;
  }
  .sidebar {
    width: 250px;
    transform: translateX(-100%);
    transition: transform 0.18s;
  }
  .shell.menu-open .sidebar {
    transform: translateX(0);
    box-shadow: 20px 0 80px rgb(13 27 51 / 18%);
  }
  .main {
    margin-left: 0;
  }
  .button.mobile-menu {
    position: absolute;
    top: 22px;
    left: 16px;
    z-index: 40;
    display: inline-flex;
    background: var(--surface);
  }
  .menu-open .button.mobile-menu {
    left: 260px;
  }
  .account-menu {
    left: 14px;
    width: 222px;
  }
  #page > .page-head,
  #page[data-layout="roomy"] > .page-head {
    flex-direction: column;
    padding: 24px 18px 0 64px;
  }
  .page-body,
  #page[data-layout="roomy"] .page-body {
    padding: 22px 18px 32px;
  }
  h1 {
    font-size: 24px;
  }
  .page-head p {
    font-size: 14px;
  }
  .kpi {
    padding: 16px;
  }
  .task-row {
    grid-template-columns: 10px minmax(0, 1fr) auto;
  }
  .task-row .task-amount {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
  .task-row .button {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .settings-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-tile:nth-child(odd) {
    border-right: 0;
  }
  .settings-tile:nth-child(odd):nth-last-child(2) {
    border-bottom: 1px solid var(--line);
  }
  .form-grid,
  .business-section .three-fields,
  .audit-filters,
  .invoice-filters {
    grid-template-columns: minmax(0, 1fr);
  }
  .dialog-header {
    padding: 20px 20px 0;
  }
  .dialog-body {
    padding: 16px 20px;
  }
  .dialog-footer {
    padding: 0 20px 20px;
  }
  .business-section-card {
    padding: 18px;
  }
  .line-fields {
    grid-template-columns: 1fr 1fr;
  }
  .line-fields > .field:first-child {
    grid-column: 1/-1;
  }
  .line-fields.secondary {
    grid-template-columns: 1fr 1fr;
  }
  .line-fields.secondary > .field:first-child {
    grid-column: auto;
  }
  .invoice-sheet {
    padding: 20px;
  }
  .invoice-top {
    padding-bottom: 20px;
  }
  .invoice-parties {
    flex-direction: column;
  }
  .data-table th:first-child,
  .data-table td:first-child {
    padding-left: 14px;
  }
  .data-table th:last-child,
  .data-table td:last-child {
    padding-right: 14px;
  }
  .invoice-table {
    min-width: 850px;
  }
  .waiting-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .waiting-due {
    grid-column: 1;
    grid-row: 2;
  }
  .waiting-amount {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .toast {
    right: 15px;
    bottom: 15px;
    max-width: calc(100vw - 30px);
  }
  .navigation-error {
    flex-wrap: wrap;
  }
}
@media (max-width: 480px) {
  .kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  .kpi {
    border-left: 0;
  }
  .kpi:nth-child(n + 2) {
    border-top: 1px solid var(--line);
  }
  .invoice-status-menu {
    padding: 14px;
  }
  .invoice-status-columns {
    grid-template-columns: 1fr 1.15fr;
    gap: 12px;
  }
  .invoice-status-columns fieldset:first-child {
    padding-right: 12px;
  }
  .invoice-status-columns legend {
    min-height: 30px;
    padding: 0 4px;
  }
  .invoice-status-option {
    gap: 7px;
    padding: 10px 6px;
  }
  .invoice-status-option .invoice-status-dot {
    width: 6px;
    height: 6px;
  }
  .invoice-filter-condition,
  .invoice-filter-value {
    flex-direction: column;
    align-items: stretch;
  }
  .invoice-filter-group {
    padding: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  :root[data-theme="dark"] {
    color-scheme: light;
    --ink: #172135;
    --surface: #fff;
    --subtle: #f7f9fb;
    --muted: #596475;
    --line: #e8ebef;
    --divider: #eceff2;
    --table-line: #e3e8f0;
  }
  html,
  body,
  #app,
  .shell,
  .main,
  #page {
    height: auto;
    overflow: visible;
  }
  .sidebar,
  .page-head .actions,
  .skip,
  .button.mobile-menu,
  .navigation-error,
  .editor-footer,
  .detail-side,
  #notice {
    display: none !important;
  }
  .main {
    margin: 0;
    padding: 0;
  }
  .page-body {
    overflow: visible;
    padding: 0;
  }
  .detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .invoice-sheet {
    border: 0;
  }
  .section-gap {
    break-inside: avoid;
  }
  .main .data-table th {
    position: static;
  }
}

/* Placeholders while a page waits for something slow (billing: the payment provider). */
.ghost {
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--subtle) 25%, var(--secondary-line) 50%, var(--subtle) 75%);
  background-size: 200% 100%;
  animation: ghost-move 1.4s linear infinite;
}
@keyframes ghost-move {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ghost {
    animation: none;
  }
}
.ghost-row td {
  padding-top: 18px;
  padding-bottom: 18px;
}
.ghost-row td:nth-child(1) .ghost {
  width: 70%;
}
.ghost-row td:nth-child(2) .ghost {
  width: 60%;
}
.ghost-row td:nth-child(3) .ghost {
  width: 45%;
}
.ghost-row td:nth-child(4) .ghost {
  width: 50%;
}
.ghost-row td:nth-child(5) .ghost {
  width: 80%;
}
.data-table tbody tr.ghost-row:hover,
.data-table tbody tr.ghost-row:hover td {
  background: transparent;
  cursor: default;
}
/* API & MCP settings page. */
.api-key-copy {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}
.api-key-copy > span {
  color: var(--muted);
  font-size: 13px;
}
.api-key-copy > div {
  display: flex;
  gap: 8px;
}
.api-key-copy input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* Pipeline. Colours from the CRM handoff; dark mode only changes the tokens below. */
:root {
  --stage-lead: #a6c0e5;
  --stage-intro: #7da6e3;
  --stage-quote: #4780d2;
  --stage-negotiation: #145ec1;
  --stage-won: #179765;
  --segment-empty: #e0e5eb;
  --card-hover: #b4c5df;
  --toggle-track: #eff2f6;
  --step-plan: #4c5666;
  --step-plan-dot: #5181c7;
  --step-today: #1351a6;
  --step-today-dot: #276ed2;
  --step-late: #bc4527;
  --step-late-dot: #cd5537;
  --step-none: #a0600b;
  --step-none-dot: #dc932e;
  --step-done: #00673f;
  --step-done-dot: #179765;
  --deal-won-button: #008856;
  --deal-lost-text: #a43c2f;
  --goal-track: #e8ebf1;
  --selected-bg: #ddecff;
  --selected-ink: #013e8b;
  --selected-ring: #4780d2;
  --tile-blue-bg: #e0ebfb;
  --tile-blue: #1e5fbf;
  --tile-cyan-bg: #d6f1f4;
  --tile-cyan: #0d7384;
  --tile-amber-bg: #fdebd3;
  --tile-amber: #a0600b;
  --tile-green-bg: #d7f2e3;
  --tile-green: #00673f;
  --tile-red-bg: #fbe3dc;
  --tile-red: #bc4527;
  --tile-violet-bg: #e6e5fb;
  --tile-violet: #4c49b8;
}
:root[data-theme="dark"] {
  --stage-lead: #5e7ca8;
  --stage-intro: #6f9ad8;
  --stage-quote: #5b94e6;
  --stage-negotiation: #8ab6f5;
  --stage-won: #39bf8a;
  --segment-empty: #2a3a55;
  --card-hover: #4a6288;
  --toggle-track: #1a2740;
  --step-plan: #a1b0c8;
  --step-plan-dot: #6f9ad8;
  --step-today: #8ab6f5;
  --step-today-dot: #8ab6f5;
  --step-late: #f09a80;
  --step-late-dot: #e57c5f;
  --step-none: #eab56a;
  --step-none-dot: #dc932e;
  --step-done: #5dd5a4;
  --step-done-dot: #39bf8a;
  --deal-won-button: #0b8a58;
  --deal-lost-text: #f09a80;
  --goal-track: #22314c;
  --selected-bg: #17345f;
  --selected-ink: #bcd6fb;
  --selected-ring: #5b94e6;
  --tile-blue-bg: #17345f;
  --tile-blue: #8ab6f5;
  --tile-cyan-bg: #123f47;
  --tile-cyan: #6fd2e0;
  --tile-amber-bg: #41300f;
  --tile-amber: #eab56a;
  --tile-green-bg: #123f2d;
  --tile-green: #5dd5a4;
  --tile-red-bg: #472219;
  --tile-red: #f09a80;
  --tile-violet-bg: #2a2960;
  --tile-violet: #b4b2f5;
}
.pipeline,
.pipeline-results,
.deal-page,
.deal-main,
.deal-aside,
.forecast {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.pipeline-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.view-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--toggle-track);
  border-radius: 8px;
}
.view-toggle-option {
  padding: 6px 14px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.view-toggle-option.active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(20 30 60 / 8%);
}
.pipeline-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  max-width: 100%;
  padding: 0 12px;
  color: var(--icon);
  border: 1px solid var(--input-line);
  border-radius: 6px;
}
.pipeline-search input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  background: none;
  border: 0;
  outline: 0;
}
.pipeline-search:focus-within {
  border-color: var(--primary);
}
.compact-select {
  width: auto;
  max-width: 220px;
  padding: 8px 10px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--secondary-line);
  border-radius: 6px;
}
.pipeline-lost {
  margin-left: auto;
  padding: 6px 2px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
}
.pipeline-lost.active,
.pipeline-lost:hover {
  color: var(--ink);
  text-decoration: underline;
}
.pipeline-empty {
  padding: 56px 24px;
  text-align: center;
  background: var(--subtle);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pipeline-empty h2 {
  font-size: 18px;
  font-weight: 600;
}
.pipeline-empty p {
  margin: 8px 0 18px;
  color: var(--muted);
}

/* Board */
.board-scroll {
  overflow-x: auto;
  background: var(--subtle);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(190px, 1fr));
  min-height: 520px;
}
.board-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px 14px;
  border-left: 1px solid var(--input-line);
}
.board-column:first-child {
  border-left: 0;
}
.board-column.drop-target {
  background: var(--nav-hover);
}
.board-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--stage-lead);
}
.board-head.intro {
  border-color: var(--stage-intro);
}
.board-head.quote {
  border-color: var(--stage-quote);
}
.board-head.negotiation {
  border-color: var(--stage-negotiation);
}
.board-head.won {
  border-color: var(--stage-won);
}
.board-head > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.board-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.board-head strong {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.board-cards {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
}
.board-empty {
  margin: auto;
  padding: 32px 8px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.deal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--input-line);
  border-radius: 8px;
}
.deal-card[draggable="true"] {
  cursor: grab;
}
.deal-card:hover {
  border-color: var(--card-hover);
}
.deal-card-title {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
}
.deal-card-title:hover {
  color: var(--link);
}
.deal-card-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.deal-card-line span {
  overflow: hidden;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.deal-card-line strong {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* The keyboard way to move a card: a real select, invisible until it is reached. */
.deal-move {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 22px;
  height: 22px;
  padding: 0;
  color: transparent;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23677284' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
  border: 1px solid var(--input-line);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  appearance: none;
}
.deal-move option {
  color: var(--ink);
  background: var(--surface);
}
.deal-card:hover .deal-move,
.deal-move:focus {
  opacity: 1;
}
.deal-step {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--step-plan);
}
.deal-step i {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--step-plan-dot);
  border-radius: 50%;
}
.deal-step span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.deal-step.today {
  color: var(--step-today);
  font-weight: 600;
}
.deal-step.today i {
  background: var(--step-today-dot);
}
.deal-step.late {
  color: var(--step-late);
  font-weight: 600;
}
.deal-step.late i {
  background: var(--step-late-dot);
}
.deal-step.none {
  color: var(--step-none);
  font-weight: 600;
}
.deal-step.none i {
  background: var(--step-none-dot);
}
.deal-step.done {
  color: var(--step-done);
}
.deal-step.done i {
  background: var(--step-done-dot);
}
.deal-step.lost {
  color: var(--muted);
}
.deal-step.lost i {
  background: var(--dot-neutral);
}

/* List */
.deal-table-card {
  overflow: hidden;
  border: 1px solid var(--input-line);
  border-radius: 8px;
}
.deal-table-card .table-wrap {
  overflow-x: auto;
}
.deal-table {
  min-width: 960px;
}
.deal-table .row-note {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.deal-sort {
  padding: 0;
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.deal-sort:hover {
  color: var(--ink);
}
th[aria-sort] .deal-sort {
  color: var(--ink);
}
.deal-money {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.deal-muted {
  color: var(--muted);
}
.deal-step-cell {
  max-width: 220px;
}
.deal-stage-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 130px;
  font-size: 13px;
}
.deal-segments {
  display: flex;
  gap: 2px;
  --filled: var(--stage-quote);
}
.deal-segments.lead {
  --filled: var(--stage-lead);
}
.deal-segments.intro {
  --filled: var(--stage-intro);
}
.deal-segments.negotiation {
  --filled: var(--stage-negotiation);
}
.deal-segments.won {
  --filled: var(--stage-won);
}
.deal-segments i {
  flex: 1;
  height: 3px;
  background: var(--segment-empty);
}
.deal-segments i.on {
  background: var(--filled);
}
.deal-chip {
  display: inline-block;
  padding: 3px 8px;
  color: var(--chip-draft);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--chip-draft-bg);
  border-radius: 4px;
}
.deal-chip.accepted,
.deal-chip.billed {
  color: var(--chip-paid);
  background: var(--chip-paid-bg);
}
.deal-chip.open {
  color: var(--chip-open);
  background: var(--chip-open-bg);
}
.deal-chip.rejected {
  color: var(--chip-late);
  background: var(--chip-late-bg);
}
.deal-no-quote {
  color: var(--muted);
  font-size: 12px;
}
.deal-avatar {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tile-blue);
  background: var(--tile-blue-bg);
  border-radius: 50%;
}
.deal-avatar.small {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
.deal-avatar.large {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.deal-avatar.green {
  color: var(--tile-green);
  background: var(--tile-green-bg);
}
.deal-avatar.amber {
  color: var(--tile-amber);
  background: var(--tile-amber-bg);
}
.deal-avatar.violet {
  color: var(--tile-violet);
  background: var(--tile-violet-bg);
}
.deal-table-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--line);
}
.deal-table-foot strong {
  color: var(--ink);
  font-weight: 600;
}

/* Forecast */
.forecast-goal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 26px;
  border: 1px solid var(--input-line);
  border-radius: 10px;
}
.forecast-goal > header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.forecast-goal h2,
.forecast-month h2 {
  font-size: 15px;
  font-weight: 600;
}
.forecast-goal p {
  color: var(--muted);
  font-size: 13px;
}
.forecast-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.forecast-total strong {
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.forecast-total span {
  color: var(--muted);
  font-size: 14px;
}
.forecast-bar {
  display: flex;
  overflow: hidden;
  height: 12px;
  background: var(--goal-track);
  border-radius: 6px;
}
.forecast-bar.small {
  height: 6px;
  border-radius: 3px;
}
.forecast-bar i.won,
.forecast-legend i.won {
  background: var(--stage-won);
}
.forecast-bar i.expected,
.forecast-legend i.expected {
  background: var(--stage-intro);
}
.forecast-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  list-style: none;
}
.forecast-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.forecast-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.forecast-legend i.needed {
  background: var(--goal-track);
  border: 1px solid var(--segment-empty);
}
.forecast-months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}
.forecast-month {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  padding-top: 20px;
  border: 1px solid var(--input-line);
  border-radius: 10px;
}
.forecast-month > header,
.forecast-figures,
.forecast-month > .forecast-bar {
  margin-inline: 24px;
}
.forecast-month > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.forecast-month > header span {
  color: var(--muted);
  font-size: 13px;
}
.forecast-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.forecast-figures span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.forecast-figures strong {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.forecast-figures strong.won {
  color: var(--step-done);
}
.forecast-deals {
  margin: 0;
  padding: 0;
  list-style: none;
}
.forecast-deals li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 24px;
  border-top: 1px solid var(--line);
}
.forecast-deals small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.forecast-deals .row-title {
  font-size: 13px;
  font-weight: 600;
}
.forecast-deal-value {
  flex-shrink: 0;
  text-align: right;
}
.forecast-deal-value strong {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* New deal */
.deal-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.deal-contact-field {
  position: relative;
}
.deal-contact-menu {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--input-line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgb(15 25 50 / 16%);
}
.deal-contact-menu[hidden] {
  display: none;
}
.deal-contact-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.deal-contact-menu button:first-child {
  border-top: 0;
}
.deal-contact-menu button.highlighted,
.deal-contact-menu button:hover {
  background: var(--nav-hover);
}
.deal-contact-menu button > span:not(.deal-avatar) {
  flex: 1;
  min-width: 0;
}
.deal-contact-menu strong {
  display: block;
  font-weight: 600;
}
.deal-contact-menu small {
  color: var(--muted);
  font-size: 12px;
}
.deal-contact-menu kbd {
  color: var(--muted);
  font: inherit;
  font-size: 12px;
}
.deal-contact-new {
  color: var(--link) !important;
  font-weight: 600 !important;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.deal-stages,
.deal-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.deal-stages label {
  flex: 1 1 110px;
}
.deal-stages input,
.deal-kinds input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.deal-stages span,
.deal-kinds span {
  display: block;
  padding: 8px 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  background: var(--subtle);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--input-line);
  cursor: pointer;
}
.deal-stages input:checked + span,
.deal-kinds input:checked + span {
  color: var(--selected-ink);
  font-weight: 600;
  background: var(--selected-bg);
  box-shadow: inset 0 0 0 1.5px var(--selected-ring);
}
.deal-stages input:focus-visible + span,
.deal-kinds input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.deal-next {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  background: var(--subtle);
  border: 0;
  border-radius: 8px;
}
.deal-next legend {
  float: left;
  width: 100%;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
}
.deal-next-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.deal-next-row > input {
  flex: 1 1 200px;
  min-width: 0;
}
.deal-due {
  display: flex;
  gap: 8px;
}
.deal-due input[type="date"] {
  min-width: 140px;
}
.deal-due input[type="time"] {
  width: 104px;
}
.check-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* Deal detail */
.deal-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* A page head lines its children up at the start; the deal's rows span the width. */
.page-head.deal-head {
  align-items: stretch;
}
.deal-head .breadcrumb {
  display: flex;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.deal-head-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
.deal-head-title {
  flex: 1 1 280px;
  min-width: 0;
}
.deal-head-title h1 {
  font-size: 26px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.deal-head-title p {
  color: var(--muted);
  font-size: 15px;
}
.deal-head-value {
  text-align: right;
}
.deal-head-value strong {
  display: block;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.deal-head-value small {
  color: var(--muted);
  font-size: 12px;
}
.button.deal-won-button {
  color: #fff;
  background: var(--deal-won-button);
  border-color: var(--deal-won-button);
}
.button.deal-lost-button {
  color: var(--deal-lost-text);
}
.deal-closed-note {
  color: var(--deal-lost-text);
  font-size: 14px;
  font-weight: 600;
}
.deal-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.deal-stepper li > * {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
}
.deal-stepper button {
  cursor: pointer;
}
.deal-stepper i {
  height: 6px;
  background: var(--segment-empty);
  border-radius: 3px;
}
.deal-stepper button:hover i {
  background: var(--card-hover);
}
.deal-stepper span {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  color: var(--muted);
  font-size: 12px;
}
.deal-stepper b {
  font-weight: 400;
}
.deal-stepper .past i {
  background: var(--stage-intro);
}
.deal-stepper .current i {
  background: var(--stage-negotiation);
}
.deal-stepper .current.won i {
  background: var(--stage-won);
}
.deal-stepper .current b {
  color: var(--selected-ink);
  font-weight: 700;
}
.deal-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  align-items: start;
  gap: 24px;
}
.deal-card-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
  border: 1px solid var(--input-line);
  border-radius: 10px;
}
.deal-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.deal-box-head h2 {
  font-size: 15px;
  font-weight: 600;
}
.deal-head-link {
  font-size: 13px;
  font-weight: 600;
}
.deal-box-head .button.text,
.forecast-total .button.text,
.deal-unlink.button.text {
  min-height: 0;
  padding: 0;
  color: var(--link);
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: 0;
}
.deal-table .row-title,
.forecast-deals .row-title {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.deal-table .row-title:hover,
.forecast-deals .row-title:hover {
  color: var(--link);
}
.deal-activity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.deal-activity-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 1.5px solid var(--secondary-line);
  border-radius: 50%;
}
button.deal-activity-check {
  cursor: pointer;
}
button.deal-activity-check:hover {
  background: var(--positive-bg);
  border-color: var(--positive);
}
.deal-activity-text {
  flex: 1 1 240px;
  min-width: 0;
}
.deal-activity-text strong {
  font-size: 14px;
  font-weight: 600;
}
.deal-activity-text p {
  font-size: 13px;
}
.deal-step-when {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--step-plan);
}
.deal-step-when.today {
  color: var(--primary);
  font-weight: 600;
}
.deal-step-when.late {
  color: var(--step-late);
  font-weight: 600;
}
.deal-no-step {
  margin: 0;
  font-size: 14px;
}
.deal-composer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 2px -24px 0;
  padding: 14px 24px 0;
  border-top: 1px solid var(--line);
}
.deal-tabs {
  display: flex;
  gap: 18px;
}
.deal-tabs button {
  padding: 4px 0 8px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.deal-tabs button.active {
  color: var(--ink);
  border-bottom-color: var(--primary);
}
.deal-composer-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.deal-composer-body textarea {
  width: 100%;
  padding: 10px 12px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--input-line);
  border-radius: 6px;
  resize: vertical;
}
.deal-composer-body .actions {
  justify-content: flex-end;
}
.deal-filter {
  display: flex;
  gap: 14px;
}
.deal-filter button {
  padding: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: 0;
  cursor: pointer;
}
.deal-filter button.active {
  color: var(--ink);
  font-weight: 600;
}
.deal-timeline {
  margin: 0 -24px -20px;
  padding: 0;
  list-style: none;
}
.deal-timeline li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
}
.deal-timeline strong {
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.deal-timeline p {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.deal-timeline blockquote {
  margin: 8px 0 0;
  padding: 10px 14px;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--subtle);
  border-radius: 8px;
}
.deal-timeline time {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.deal-timeline-empty {
  display: block !important;
  color: var(--muted);
  font-size: 13px;
}
.deal-tile {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--tile-blue);
  background: var(--tile-blue-bg);
  border-radius: 8px;
}
.deal-tile.email {
  color: var(--tile-cyan);
  background: var(--tile-cyan-bg);
}
.deal-tile.note {
  color: var(--tile-amber);
  background: var(--tile-amber-bg);
}
.deal-tile.call,
.deal-tile.won {
  color: var(--tile-green);
  background: var(--tile-green-bg);
}
.deal-tile.lost {
  color: var(--tile-red);
  background: var(--tile-red-bg);
}
.deal-tile.plus {
  color: var(--tile-violet);
  background: var(--tile-violet-bg);
}
.deal-quote-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 14px;
  font-weight: 600;
}
.deal-quote-title .deal-muted {
  font-size: 13px;
  font-weight: 400;
}
.deal-quote-lines {
  margin: 0;
  padding: 0;
  font-size: 13px;
  list-style: none;
}
.deal-quote-lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.deal-quote-lines li.total {
  font-size: 14px;
  font-weight: 700;
}
.deal-side-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.deal-side-actions > * {
  flex: 1 1 110px;
  justify-content: center;
  text-align: center;
}
.deal-unlink {
  align-self: flex-start;
}
.deal-link-quote {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.deal-link-quote > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.deal-details {
  margin: 0;
}
.deal-details > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 14px;
  border-top: 1px solid var(--line);
}
.deal-details dt {
  color: var(--muted);
}
.deal-details dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
.deal-contact {
  display: flex;
  align-items: center;
  gap: 12px;
}
.deal-contact strong {
  font-weight: 600;
}
.deal-contact p {
  color: var(--muted);
  font-size: 13px;
}
.deal-contact-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--icon);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.deal-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--subtle);
  border-radius: 8px;
}
.deal-history span {
  color: var(--muted);
  font-size: 12px;
}
.deal-history strong {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.deal-history small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.deal-history small.paid {
  color: var(--step-done);
}
.deal-history small.overdue {
  color: var(--step-late);
}
@media (max-width: 1100px) {
  .deal-grid,
  .forecast-months {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .pipeline-lost {
    margin-left: 0;
  }
  .pipeline-search,
  .compact-select {
    width: 100%;
    max-width: none;
  }
  .deal-stepper {
    grid-template-columns: repeat(5, minmax(56px, 1fr));
    overflow-x: auto;
  }
  .deal-card-box {
    padding: 16px;
  }
  .deal-composer,
  .deal-timeline {
    margin-inline: -16px;
  }
  .deal-timeline li,
  .deal-composer {
    padding-inline: 16px;
  }
  .deal-timeline li {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .deal-timeline time {
    grid-column: 2;
  }
}
.form-error .upgrade-link {
  display: flex;
  width: fit-content;
  margin-top: 10px;
}

/* Sharing a quote (quote-portal.js): the people invited, the files shared, the invite dialog. */
.qportal-list { list-style: none; margin: 0; padding: 0 20px 16px; }
.qportal-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--divider); }
.qportal-list li:first-child { border-top: 0; }
.qportal-list li > div { display: flex; flex-direction: column; min-width: 0; }
.qportal-list strong { overflow-wrap: anywhere; font-weight: 600; }
.qportal-list small { font-size: 0.8125rem; }
.qinv { display: grid; gap: 8px; justify-items: start; }
.qinv-list { display: grid; gap: 8px; width: 100%; }
.qinv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.qinv-row input { width: 100%; }

/* A phase the customer sees as one amount: its lines folded on the quote page. */
.quote-phase-hidden > summary { cursor: pointer; padding: 10px 20px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--divider); }
.quote-phase-hidden[open] > summary { border-bottom: 1px solid var(--divider); }

.quote-pdf-head { margin: 18px 0 2px; font-size: 15px; }
.quote-upload-state { display: flex; align-items: center; gap: 10px; }

/* Clear filters: an orange that fades in while the list is filtered, and out once it is not. */
.button.filter-reset {
  flex: none;
  align-self: flex-end;
  white-space: nowrap;
  color: var(--muted);
  border-color: var(--line);
  background-color: transparent;
  transition: background-color 0.8s ease, color 0.8s ease, border-color 0.8s ease, box-shadow 0.8s ease;
}
.button.filter-reset:disabled { cursor: default; opacity: 0.6; }
.button.filter-reset.active {
  color: #8a4300;
  border-color: #f2b46d;
  background-color: #fde3c4;
  box-shadow: 0 0 0 3px rgb(242 140 40 / 14%);
}
.button.filter-reset.active:hover { background-color: #fbd3a4; }
:root[data-theme="dark"] .button.filter-reset.active {
  color: #ffd2a1;
  border-color: #a8601f;
  background-color: rgb(196 108 30 / 28%);
}
@media (prefers-reduced-motion: reduce) { .button.filter-reset { transition: none; } }

/* The pipeline's bar stays one line on a desktop: the search gives way to the filters. */
.pipeline-toolbar .pipeline-search { flex: 1 1 180px; width: auto; min-width: 160px; max-width: 280px; }
.pipeline-toolbar .filter-reset { align-self: center; }

/* A contact's popup: its deals, quotes, invoices… each a list filtered to them. */
.contact-links { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--divider); }
.contact-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 13px; text-decoration: none; background: var(--surface); }
.contact-links a:hover { background: var(--nav-hover); border-color: var(--secondary-line); }
.contact-links svg { color: var(--icon); }
.contact-scope { margin-bottom: 12px; }

/* Yes/no in the record editor (data.js control): a switch with its label beside it. */
.field.switch-field {
  flex-direction: row;
  align-items: center;
  align-self: end;
  gap: 12px;
  min-height: 42px;
  cursor: pointer;
}
.switch {
  position: relative;
  display: inline-flex;
  flex: none;
}
.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch-track {
  display: inline-flex;
  width: 40px;
  height: 24px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 12px;
  background: var(--secondary-line);
  transition: background-color 0.18s ease-out;
}
.switch-track > span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(13 27 51 / 25%);
  transition: transform 0.18s ease-out;
}
.switch input:checked + .switch-track {
  background: var(--primary);
}
.switch input:checked + .switch-track > span {
  transform: translateX(16px);
}
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.switch-label {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

/* A bank's colour (data.js colorField): the quote styles' colour picker. */
.field.color-field .qb-swatch {
  width: 34px;
  height: 34px;
}

/* Settings search (settings-search.js): a box in the page head; typing shows results, not the groups. */
.settings-search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(360px, 100%);
  color: var(--muted);
}
.settings-search > svg {
  position: absolute;
  left: 12px;
  pointer-events: none;
}
.settings-search-input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 38px;
  box-sizing: border-box;
  border: 1px solid var(--input-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.settings-search-input:focus {
  border-color: var(--primary);
  outline: 3px solid var(--focus);
  outline-offset: 0;
}
.settings-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 760px;
}
.settings-results[hidden] {
  display: none;
}
.settings-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  transition:
    border-color 0.12s,
    background-color 0.12s;
}
.settings-result:hover,
.settings-result.active {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--surface));
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
.settings-result-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-result-text strong {
  font-size: 15px;
}
.settings-result-text small {
  color: var(--muted);
  font-size: 13px;
}
.settings-results-empty {
  margin: 8px 0;
  color: var(--muted);
}
#page .settings-index[hidden] {
  display: none;
}

/* New quote: two big choices. */
/* AI busy indicator (ai-progress.js), as in Sallyport: a breathing sparkle, a sliding bar, a ticking clock. */
.ai-progress {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.ai-progress[hidden] {
  display: none;
}
/* The question makes room for the indicator while the AI works. */
.quote-start-prompt [hidden] {
  display: none;
}
.ai-progress-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.ai-progress-status {
  flex: 1;
  min-width: 0;
}
.ai-progress-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--muted);
}
.ai-progress-orb {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  animation: ai-orb 1.8s ease-in-out infinite;
}
.ai-progress-orb svg {
  animation: ai-spin 3.2s linear infinite;
}
.ai-progress-bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.ai-progress-bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: ai-slide 1.6s ease-in-out infinite;
}
.ai-progress[data-status="queued"] .ai-progress-bar > span {
  animation-duration: 2.8s;
  opacity: 0.55;
}
.ai-progress-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  min-height: 1.5em;
}
.ai-progress-note.is-fresh {
  animation: ai-note-in 0.5s ease-out;
}
@keyframes ai-orb {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 35%, transparent);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px transparent;
  }
}
@keyframes ai-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ai-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(290%);
  }
}
@keyframes ai-note-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-progress-orb,
  .ai-progress-orb svg,
  .ai-progress-note.is-fresh {
    animation: none;
  }
  .ai-progress-bar > span {
    animation: none;
    width: 100%;
    opacity: 0.5;
  }
}
.button.ai-button {
  border: 1px solid var(--primary);
  background: var(--surface);
  color: var(--primary);
}
.button.ai-button:hover,
.button.ai-button:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  color: var(--primary);
}
.quote-start {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.quote-start button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.quote-start button:hover,
.quote-start button:focus-visible {
  border-color: var(--ink);
}
.quote-start strong {
  font-size: 1.05rem;
}
.quote-start small,
.quote-start-note {
  color: var(--muted);
}
.quote-start-prompt textarea {
  width: 100%;
}

/* Profile › Your signature: the same pad customers sign with (quote-sign.js). */
.profile-signature .qp-pad { position: relative; height: 150px; border: 1.5px dashed var(--secondary-line); border-radius: 12px; background: #fff; }
/* Dark ink on white in either theme: the drawing goes into PDFs as it is. */
.profile-signature .qp-pad-canvas { position: absolute; inset: 0; width: 100%; height: 100%; color: #172135; touch-action: none; cursor: crosshair; }
.profile-signature .qp-pad-line { position: absolute; right: 18px; bottom: 30px; left: 18px; height: 1px; background: var(--line); pointer-events: none; }
.profile-signature .qp-pad-hint { position: absolute; bottom: 8px; left: 18px; color: var(--muted); font-size: 12px; pointer-events: none; }
.profile-signature .qp-pad-clear { position: absolute; z-index: 1; top: 6px; right: 10px; padding: 4px 6px; border: 0; background: none; color: var(--primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.profile-signature-image { display: block; max-width: 320px; max-height: 120px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* Filter panels: every control on one line is one height (an input's: 1.5em + padding + border), and a
   plain button wears an input's border, so the search button, Clear filters and the fields line up. */
:is(.toolbar, .audit-filters, .invoice-filters, .report-filters) :is(.button, input:not([type="checkbox"]):not([type="radio"]), select) {
  box-sizing: border-box;
  height: calc(1.5em + 22px);
  font-size: 14px;
}
:is(.toolbar, .audit-filters, .invoice-filters, .report-filters) .button {
  padding-top: 0;
  padding-bottom: 0;
}
:is(.toolbar, .audit-filters, .invoice-filters, .report-filters) .button:not(.primary):not(.active):not(.danger) {
  border-color: var(--input-line);
}
.search .button {
  aspect-ratio: auto;
  min-width: calc(1.5em + 22px);
}

/* Contacts, while there are none: the welcome above the search. */
.contacts-welcome {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px;
  overflow: hidden;
  padding: 32px 36px;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 14px;
  background:
    radial-gradient(110% 130% at 100% 0%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 58%),
    radial-gradient(80% 110% at 0% 100%, color-mix(in srgb, var(--primary) 7%, transparent) 0%, transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--primary) 4%, var(--surface)) 0%, var(--surface) 70%);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* A fine dot grid, strongest behind the illustration and fading out towards the text. */
.contacts-welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--primary) 26%, transparent) 1.2px, transparent 0);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgb(0 0 0 / 55%) 40%, transparent 75%);
  mask-image: linear-gradient(to left, #000 0%, rgb(0 0 0 / 55%) 40%, transparent 75%);
  pointer-events: none;
}
/* A soft blue disc behind the illustration. */
.contacts-welcome::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -60px;
  z-index: -1;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 16%, transparent) 0%, transparent 68%);
  pointer-events: none;
}
.contacts-welcome.is-dragging {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.contacts-welcome-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.contacts-welcome-kicker {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--nav-active-bg);
  color: var(--nav-active);
  font-size: 12px;
  font-weight: 600;
}
.contacts-welcome h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.contacts-welcome-intro > p {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.contacts-welcome-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
}
.contacts-welcome-steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.contacts-welcome-steps li:first-child {
  color: var(--ink);
}
.contacts-welcome-steps span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
}
.contacts-welcome-steps li:first-child span {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-ink);
}
.contacts-welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contacts-welcome-art {
  align-self: center;
  width: 200px;
  height: auto;
  margin: -8px 0 2px;
}
.contacts-welcome-art .art-glow { fill: color-mix(in srgb, var(--primary) 9%, transparent); }
.contacts-welcome-art .art-card { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.contacts-welcome-art .art-card-back { fill: var(--subtle); }
.contacts-welcome-art .art-dot { fill: color-mix(in srgb, var(--primary) 22%, var(--surface)); }
.contacts-welcome-art .art-dot.alt { fill: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.contacts-welcome-art .art-avatar { fill: var(--nav-active-bg); }
.contacts-welcome-art .art-face { fill: none; stroke: var(--nav-active); stroke-width: 2; stroke-linecap: round; }
.contacts-welcome-art .art-face-fill { fill: var(--nav-active); }
.contacts-welcome-art .art-line { fill: var(--line); }
.contacts-welcome-art .art-line.soft { fill: var(--divider); }
.contacts-welcome-art .art-line.strong { fill: var(--muted); opacity: 0.55; }
.contacts-welcome-art .art-plus circle { fill: var(--primary); }
.contacts-welcome-art .art-plus path { fill: none; stroke: var(--primary-ink); stroke-width: 2.4; stroke-linecap: round; }
.contacts-welcome-art .art-spark { fill: color-mix(in srgb, var(--primary) 55%, var(--surface)); }
.contacts-welcome-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.contacts-welcome-option:hover,
.contacts-welcome-option:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 12%, transparent);
  transform: translateY(-1px);
}
.contacts-welcome-option-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--nav-active-bg);
  color: var(--nav-active);
}
.contacts-welcome-option[data-primary] .contacts-welcome-option-icon {
  background: var(--primary);
  color: var(--primary-ink);
}
.contacts-welcome-option-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.contacts-welcome-option-text strong {
  font-size: 15px;
}
.contacts-welcome-option-text span {
  color: var(--muted);
  font-size: 13px;
}
.contacts-welcome-arrow {
  color: var(--muted);
  font-size: 18px;
  transition: transform 0.15s ease, color 0.15s ease;
}
.contacts-welcome-option:hover .contacts-welcome-arrow {
  color: var(--primary);
  transform: translateX(3px);
}
.contacts-welcome-drop {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 960px) {
  .contacts-welcome {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 20px;
  }
  .contacts-welcome h2 {
    font-size: 24px;
  }
  .contacts-welcome-art {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contacts-welcome-option,
  .contacts-welcome-arrow {
    transition: none;
  }
}

/* The contact import: the first rows, a field per column. */
.contacts-import {
  display: grid;
  gap: 12px;
}
.contacts-import p {
  margin: 0;
}
.contacts-import-preview {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.contacts-import-preview th {
  min-width: 160px;
  vertical-align: bottom;
}
.contacts-import-preview th small {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-weight: 500;
  text-transform: none;
}
.contacts-import-preview select {
  width: 100%;
}
.contacts-import-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-weight: 600;
}
.contacts-import-summary small {
  color: var(--muted);
  font-weight: 400;
}
.contacts-paste {
  width: 100%;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* filter-menu.js: one list of checkboxes behind a filter's button. */
.filter-menu {
  padding: 14px;
}
.filter-menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.filter-menu-list legend {
  margin-bottom: 8px;
  padding: 0 10px;
  color: var(--nav-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.filter-menu .invoice-status-option {
  min-height: 40px;
  padding: 8px 10px;
}
.filter-menu footer {
  margin-top: 10px;
  padding-top: 10px;
}
.filter-menu-compact {
  gap: 0;
}
.filter-menu-compact .filter-menu-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.filter-menu-compact .invoice-status-trigger {
  width: auto;
  min-width: 150px;
  max-width: 230px;
  min-height: 0;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
}

/* Every empty grid: a drawing above its one line (ui.js emptyArt). */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.empty h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.empty-art {
  width: 150px;
  height: auto;
  margin-bottom: 10px;
}
.empty-art .art-shadow { fill: color-mix(in srgb, var(--primary) 8%, transparent); }
.empty-art .art-sheet { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.empty-art .art-sheet-head { fill: var(--subtle); }
.empty-art .art-row { fill: var(--line); }
.empty-art .art-bullet { fill: color-mix(in srgb, var(--primary) 30%, var(--surface)); }
.empty-art .faint { opacity: 0.55; }
.empty-art .art-lens circle { fill: color-mix(in srgb, var(--primary) 7%, var(--surface)); stroke: var(--primary); stroke-width: 4; }
.empty-art .art-lens path { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; }
.empty-art .art-spark { fill: color-mix(in srgb, var(--primary) 45%, var(--surface)); }

/* "N people wait for activation": a yellow note above Members' search and on the overview. */
.waiting-note {
  --waiting-bg: #fdf7dc;
  --waiting-bg-hover: #fbf0c4;
  --waiting-line: #f0d97c;
  --waiting-icon-bg: #f9e7a1;
  --waiting-icon: #8a6a00;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--waiting-line);
  border-radius: 10px;
  background: var(--waiting-bg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.waiting-note:hover,
.waiting-note:focus-visible {
  border-color: color-mix(in srgb, var(--waiting-line) 70%, var(--waiting-icon));
  background: var(--waiting-bg-hover);
}
.waiting-note-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--waiting-icon-bg);
  color: var(--waiting-icon);
}
.waiting-note-text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}
.waiting-note-text strong {
  font-size: 14px;
}
.waiting-note-text small {
  color: var(--muted);
  font-size: 13px;
}
.waiting-note-action {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .waiting-note {
    flex-wrap: wrap;
  }
  .waiting-note-action {
    margin-left: 50px;
  }
}
/* Members: the status filter sits in the search panel, at a filter's width. */
.member-filters.search > .field:has(select[name="status"]) {
  flex: 0 0 200px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .waiting-note {
    --waiting-bg: rgb(234 179 8 / 11%);
    --waiting-bg-hover: rgb(234 179 8 / 16%);
    --waiting-line: rgb(234 179 8 / 38%);
    --waiting-icon-bg: rgb(234 179 8 / 22%);
    --waiting-icon: #f5d061;
  }
}
:root[data-theme="dark"] .waiting-note {
  --waiting-bg: rgb(234 179 8 / 11%);
  --waiting-bg-hover: rgb(234 179 8 / 16%);
  --waiting-line: rgb(234 179 8 / 38%);
  --waiting-icon-bg: rgb(234 179 8 / 22%);
  --waiting-icon: #f5d061;
}

/* A negative action as a button: red text and border (Decline). */
.button.negative {
  border-color: var(--overdue);
  color: var(--overdue);
  background: var(--surface);
}
.button.negative:hover,
.button.negative:focus-visible {
  background: color-mix(in srgb, var(--overdue) 8%, var(--surface));
}
.member-actions .button + .button {
  margin-left: 8px;
}
/* An inactive person's row is dimmed, its buttons are not. */
.members-table tr.is-inactive td.member-actions {
  opacity: 1;
}
/* Delete in a record's dialog: on its own at the left of the footer, away from Save. */
.dialog-footer .actions .dialog-delete {
  margin-right: auto;
}

/* Tags (tags.js): a fixed palette of nine; chips mix their colour with the surface, so they read in
   both themes without a dark-mode copy of each. */
:root {
  --tag-gray: oklch(0.6 0.02 258);
  --tag-blue: oklch(0.56 0.15 258);
  --tag-teal: oklch(0.56 0.12 195);
  --tag-green: oklch(0.56 0.14 150);
  --tag-amber: oklch(0.7 0.14 75);
  --tag-orange: oklch(0.65 0.16 50);
  --tag-red: oklch(0.58 0.19 27);
  --tag-rose: oklch(0.6 0.17 5);
  --tag-violet: oklch(0.56 0.16 300);
}
.tag-gray { --tag: var(--tag-gray); }
.tag-blue { --tag: var(--tag-blue); }
.tag-teal { --tag: var(--tag-teal); }
.tag-green { --tag: var(--tag-green); }
.tag-amber { --tag: var(--tag-amber); }
.tag-orange { --tag: var(--tag-orange); }
.tag-red { --tag: var(--tag-red); }
.tag-rose { --tag: var(--tag-rose); }
.tag-violet { --tag: var(--tag-violet); }
.invoice-status-dot[class*="tag-"] {
  background: var(--tag);
}
.tag-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 16em;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--tag, var(--tag-gray)) 14%, var(--surface));
  color: color-mix(in oklch, var(--tag, var(--tag-gray)) 70%, var(--ink));
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.tag-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tag, var(--tag-gray));
}
.tag-field {
  grid-column: 1 / -1;
  margin-top: 12px;
}
.tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 4px 8px;
  border: 1px solid var(--input-line);
  border-radius: 8px;
  background: var(--surface);
  cursor: text;
}
.tag-input:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.tag-input .tag-search:focus-visible {
  outline: none;
}
.tag-input .tag-search {
  flex: 1 1 10em;
  min-width: 8em;
  border: 0;
  padding: 4px 2px;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.tag-remove {
  display: inline-grid;
  place-items: center;
  margin: 0 -4px 0 0;
  padding: 1px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.tag-remove:hover,
.tag-remove:focus-visible {
  background: color-mix(in oklch, var(--tag, var(--tag-gray)) 25%, var(--surface));
}
.tag-combo {
  position: relative;
}
.tag-options {
  position: fixed;
  inset: auto;
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.14);
}
.tag-options li {
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.tag-options li.active {
  background: var(--hover);
}
.tag-create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.tag-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-color {
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.tag-color input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tag-color .tag-dot {
  width: 22px;
  height: 22px;
}
.tag-color input:checked + .tag-dot {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--tag);
}
.tag-color input:focus-visible + .tag-dot {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}