:root {
  /* One control metric for every button and dropdown in the portal. Declared
     here so a new control inherits it rather than inventing another height --
     there were twelve before this. */
  --control-h: 44px;
  --control-radius: 999px;
  --control-font: 14px;
  --control-weight: 600;
  --control-weight-strong: 700;
  --control-pad: 0 16px;
  --control-gap: 8px;

  color-scheme: light;
  --ink: #17372f;
  --text: #243a35;
  --muted: #66736d;
  --green-900: #17372f;
  --green-800: #245744;
  --green-700: #356e55;
  --sage-100: #f1f5ed;
  --sage-200: #e4ecdf;
  --sage-300: #ccd9c4;
  --gold: #b99a52;
  --cream: #f8f5ec;
  --paper: #fffdf8;
  --white: #ffffff;
  --line: rgba(23, 55, 47, 0.14);
  --line-strong: rgba(23, 55, 47, 0.24);
  --sidebar: #17372f;
  --sidebar-soft: #245744;
  --teal: #245744;
  --blue: #5f7f96;
  --coral: #9c5d45;
  --amber: #b99a52;
  --green: #356e55;
  --chart-1: #245744;
  --chart-2: #b99a52;
  --chart-3: #c96f4a;
  --chart-4: #5f7f96;
  --chart-5: #7a62a8;
  --chart-6: #3f8d79;
  --chart-grid: rgba(23, 55, 47, 0.11);
  --chart-text: #66736d;
  --shadow: 0 20px 60px rgba(23, 55, 47, 0.1);
  --soft-shadow: 0 10px 32px rgba(23, 55, 47, 0.07);
  font-family:
    "Helvetica Neue", Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Component display rules must never override the HTML hidden contract. This
   especially matters for booking presets and payment panels, which are flex
   containers once enabled but must not leave blank controls before selection. */
[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(var(--sage-200-rgb), 0.45) 0, rgba(var(--cream-rgb), 0) 420px),
    var(--cream);
  font-size: 16px;
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  cursor: pointer;
}

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 10%, rgba(var(--gold-rgb), 0.12), transparent 32rem),
    linear-gradient(180deg, rgba(var(--sage-200-rgb), 0.55) 0, rgba(var(--cream-rgb), 0) 460px),
    var(--cream);
  padding: 24px;
}

.login-shell {
  width: min(480px, calc(100vw - 32px));
}

.login-panel {
  --control-font: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 8px;
  padding: 34px;
}

/* Keep the authentication surface readable and prevent iOS from zooming when
   an input receives focus. This is intentionally scoped to the login panel so
   compact dashboard controls retain their established density. */
.login-panel label,
.login-panel input,
.login-panel select,
.login-panel textarea,
.login-panel button,
.login-panel p,
.login-panel .login-divider,
.login-panel .login-passkey-note,
.login-panel .form-error,
.login-panel .dev-note,
.login-panel .brand-product,
.login-panel .login-brand span {
  font-size: 16px;
}

.brand-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--sidebar);
  color: white;
  font-weight: 800;
  letter-spacing: 0;
}

.brand-mark.small {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

.brand-logo {
  width: min(238px, 100%);
}

.login-brand .brand-logo {
  width: min(357px, 100%);
}

.logo-dark {
  display: none;
}

.login-brand {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.login-brand span,
.brand-product {
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.login-panel h1 {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.08;
  margin: 22px auto 26px;
  max-width: none;
  text-align: center;
  white-space: nowrap;
}

.login-form {
  display: grid;
  gap: 18px;
}

#loginRequestScreen .login-form {
  margin-top: 18px;
}

#loginForm button[type="submit"] {
  margin-top: 6px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  border-radius: 7px;
  padding: 10px 11px;
  min-width: 0;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(var(--gold-rgb), 0.75);
  outline-offset: 2px;
}

textarea {
  min-height: 88px;
  resize: vertical;
}

.login-form button,
.primary-btn,
.secondary-btn,
.danger-btn {
  /* Was padding-driven, so each of the three ended up a different height as
     soon as one of them held an icon: 48, 50, 48. Height is stated now. */
  box-sizing: border-box;
  height: var(--control-h);
  min-height: var(--control-h);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  padding: var(--control-pad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  font-size: var(--control-font);
  font-weight: var(--control-weight-strong);
  line-height: 1;
  white-space: nowrap;
}

.login-form button,
.primary-btn {
  background: var(--green-800);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(var(--green-800-rgb), 0.18);
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.64);
  color: var(--green-900);
  border: 1px solid var(--line-strong);
}

.login-passkey-btn {
  width: 100%;
  margin-top: 12px;
  box-shadow: none;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-strong);
}

.login-divider span {
  flex: 0 0 auto;
}

.login-passkey-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
}

.login-form + .login-passkey-btn.secondary-btn {
  background: rgba(255, 255, 255, 0.64);
  color: var(--green-900);
  border: 1px solid var(--line-strong);
}

.danger-btn {
  background: #fde8e1;
  color: #92391f;
}

.icon-only {
  width: var(--control-h);
  min-width: var(--control-h);
  padding: 0;
}

.form-error {
  min-height: 20px;
  margin: 0;
  color: #a33a24;
  font-weight: 650;
}

#codeForm .form-error:empty {
  display: none;
}

.dev-note {
  color: var(--muted);
  font-size: 13px;
  margin: 18px 0 0;
}

.dashboard-body {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 292px 1fr;
  transition: grid-template-columns 0.18s ease;
}

.mobile-appbar,
.mobile-drawer-backdrop,
.mobile-bottom-nav,
.filter-drawer-backdrop,
.mobile-menu-sheet-handle {
  display: none;
}

.mobile-appbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 44;
  min-height: 64px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(var(--cream-rgb), 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.mobile-brand {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
}

.mobile-brand .brand-icon {
  width: 30px;
  height: 30px;
}

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

.mobile-title span,
.mobile-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.mobile-title strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.mobile-actions {
  display: flex;
  gap: 7px;
  margin-left: auto;
}

.dashboard-body.sidebar-collapsed {
  grid-template-columns: 88px 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 7px 16px;
  background: rgba(var(--cream-rgb), 0.94);
  color: var(--green-900);
  padding: 22px 18px;
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px);
  overflow: hidden auto;
}

.sidebar-top {
  display: grid;
  gap: 18px;
  align-items: start;
}

.sidebar-menu-toggle,
.sidebar-logout,
.sidebar-theme-toggle {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--green-900);
}

.sidebar-menu-toggle,
.sidebar-logout,
.sidebar-theme-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.sidebar-brand {
  display: grid;
  gap: 9px;
  align-items: start;
  color: var(--green-900);
  text-decoration: none;
  font-weight: 850;
  margin: 0 4px 2px;
}

.sidebar-brand .brand-logo {
  width: 218px;
}

.sidebar-brand .brand-icon {
  display: none;
  height: 49px;
  width: auto;
}

.sidebar-brand .brand-product {
  color: var(--gold);
  padding-left: 2px;
}

.sidebar-user {
  appearance: none;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 46px;
  margin: 2px 0 8px;
  padding: 9px 12px;
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: 12px;
  background: rgba(var(--green-800-rgb), 0.08);
  box-shadow: inset 3px 0 0 rgba(var(--gold-rgb), 0.46);
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.sidebar-user:hover {
  background: rgba(var(--green-800-rgb), 0.12);
  border-color: rgba(var(--ink-rgb), 0.16);
  box-shadow:
    inset 3px 0 0 rgba(var(--gold-rgb), 0.68),
    0 10px 22px rgba(var(--ink-rgb), 0.08);
  transform: translateX(2px);
}

.sidebar-user:focus-visible,
.sidebar-user.active {
  background: var(--green-800);
  background-color: #052042;
  border-color: var(--green-800);
  box-shadow: inset 3px 0 0 var(--gold);
  outline: none;
}

.sidebar-user.active .sidebar-user-avatar,
.sidebar-user:focus-visible .sidebar-user-avatar {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.sidebar-user.active .sidebar-user-copy strong,
.sidebar-user.active .sidebar-user-copy span,
.sidebar-user:focus-visible .sidebar-user-copy strong,
.sidebar-user:focus-visible .sidebar-user-copy span {
  color: var(--white);
}

.sidebar-user-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--green-900);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
}

.sidebar-user-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.sidebar-user-copy strong,
.sidebar-user-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-copy strong {
  font-size: 0.98rem;
  line-height: 1.1;
  color: var(--green-900);
  font-weight: 760;
}

.sidebar-user-copy span {
  font-size: 0.79rem;
  line-height: 1.2;
  color: var(--muted);
}

/* Keep the selected profile control visible after navigating to Profile. */
.dashboard-body.profile-view .sidebar-user {
  background-color: #052042 !important;
  border-color: #052042 !important;
}

.nav-list {
  display: grid;
  gap: 4px;
}

.nav-folder {
  display: grid;
  gap: 4px;
}

.nav-folder-toggle {
  /* A folder is a real navigation destination, not a section label. Keep it
     visually identical to the sidebar options it contains. */
  min-height: 46px;
}

.nav-folder-toggle .nav-folder-chevron {
  margin-left: auto;
  transition: transform 0.18s ease;
}

.nav-folder.is-collapsed .nav-folder-items {
  display: none;
}

.nav-folder.is-collapsed .nav-folder-chevron {
  transform: rotate(-90deg);
}

.nav-folder-items {
  display: grid;
  gap: 4px;
  padding-left: 12px;
}

.nav-list button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: rgba(var(--ink-rgb), 0.78);
  padding: 11px 12px;
  border-radius: 8px;
  text-align: left;
  font-size: 14px;
  font-weight: 750;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.nav-list button:hover,
.sidebar-logout:hover,
.sidebar-theme-toggle:hover {
  background: var(--sage-200);
  color: var(--green-900);
  box-shadow:
    inset 2px 0 0 rgba(var(--gold-rgb), 0.6),
    0 10px 22px rgba(var(--ink-rgb), 0.08);
  transform: translateX(2px);
}

.nav-list button.active {
  background: var(--green-800);
  color: var(--white);
  box-shadow: inset 3px 0 0 var(--gold);
}

.nav-list svg,
.toolbar svg,
.button-row svg,
.sidebar-menu-toggle svg,
.sidebar-logout svg,
.sidebar-theme-toggle svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.sidebar-footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 14px;
}

.sidebar-utility-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  align-self: flex-end;
}

.dashboard-body.sidebar-collapsed .sidebar {
  align-items: center;
  padding-inline: 14px;
}

.dashboard-body.sidebar-collapsed .sidebar-top {
  justify-items: center;
  width: 44px;
}

.dashboard-body.sidebar-collapsed .sidebar-brand {
  display: grid;
  justify-items: center;
  margin: 0 0 2px;
  width: 44px;
}

.dashboard-body.sidebar-collapsed .sidebar-brand .brand-logo {
  display: none;
}

.dashboard-body.sidebar-collapsed .sidebar-brand .brand-icon {
  display: block;
}

.dashboard-body.sidebar-collapsed .sidebar-user {
  grid-template-columns: 1fr;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  margin-inline: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.dashboard-body.sidebar-collapsed .sidebar-user:hover,
.dashboard-body.sidebar-collapsed .sidebar-user:focus-visible,
.dashboard-body.sidebar-collapsed .sidebar-user.active {
  border: 0;
  background: var(--green-800);
  box-shadow: inset 3px 0 0 var(--gold);
  transform: none;
}

.dashboard-body.sidebar-collapsed .sidebar-user:hover .sidebar-user-avatar {
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(var(--ink-rgb), 0.12);
}

.dashboard-body.sidebar-collapsed .sidebar-user:focus-visible .sidebar-user-avatar,
.dashboard-body.sidebar-collapsed .sidebar-user.active .sidebar-user-avatar {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--white);
  box-shadow: none;
}

.dashboard-body.sidebar-collapsed .sidebar-user-copy {
  display: none;
}

.dashboard-body.sidebar-collapsed .nav-list {
  justify-items: center;
  width: 44px;
}

.dashboard-body.sidebar-collapsed .nav-list button {
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
}

.dashboard-body.sidebar-collapsed .sidebar-footer {
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  width: 44px;
}

.dashboard-body.sidebar-collapsed .sidebar-utility-stack {
  align-items: center;
}

.dashboard-body.sidebar-collapsed .nav-list span {
  display: none;
}

.dashboard-body.sidebar-collapsed .nav-folder-toggle {
  min-height: 44px !important;
  padding: 0 !important;
}

.dashboard-body.sidebar-collapsed .nav-folder-items {
  padding-left: 0;
}

.dashboard-body.sidebar-collapsed .nav-folder-chevron {
  display: none;
}

.app-main {
  min-width: 0;
  padding: 28px clamp(22px, 3vw, 42px);
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  margin-bottom: 18px;
}

.dashboard-body.tracking-links-view .topbar {
  margin-bottom: 6px;
}

.dashboard-body.tracking-links-view .topbar > div:first-child {
  min-width: 0;
}

.dashboard-body.tracking-links-view .topbar-heading-row {
  width: 100%;
  justify-content: space-between;
}

.dashboard-body.tracking-links-view #trackingLinkBuilderToggle {
  margin-left: auto;
}

.dashboard-body.link-tree-view .toolbar,
.dashboard-body.events-view .toolbar,
.dashboard-body.passwords-view .toolbar {
  display: none;
}

.dashboard-body.passwords-view .toolbar-actions {
  display: none;
}

#companyName {
  display: none;
}

.dashboard-body.passwords-view .app-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.dashboard-body.passwords-view #viewContent {
  flex: 1 1 auto;
  display: grid;
  min-height: 0;
}

.dashboard-body.passwords-view .native-vault-shell {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.dashboard-body.passwords-view .native-vault-layout {
  height: 100%;
  min-height: 0;
}

.analytics-tabs-shell[hidden] {
  display: none;
}

.analytics-tabs-shell {
  margin-bottom: 16px;
}

.analytics-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
}

.analytics-tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  font-size: 14px;
  font-weight: 780;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.analytics-tab:hover {
  background: rgba(var(--green-800-rgb), 0.08);
  border-color: rgba(var(--green-800-rgb), 0.2);
  color: var(--green-900);
  box-shadow: 0 10px 20px rgba(var(--ink-rgb), 0.08);
  transform: translateY(-1px);
}

.analytics-tab.active {
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(var(--green-800-rgb), 0.16);
}

.analytics-tab i,
.analytics-tab [data-lucide] {
  width: 16px;
  height: 16px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.topbar h1 {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.08;
}

.dashboard-body.analytics-view .topbar-heading-row {
  width: 100%;
  justify-content: space-between;
  gap: 16px;
}

.topbar-heading-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.analytics-view-picker {
  position: relative;
  flex: 0 1 clamp(188px, 19vw, 236px);
  min-width: 188px;
  margin-left: auto;
}

.analytics-view-picker[hidden] {
  display: none !important;
}

.analytics-view-picker::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 14px;
  height: 14px;
  transform: translateY(-38%);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25L7 9.25L11 5.25' stroke='%23305848' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

/* Sits in the topbar next to the icon buttons, so it is built from the same
   parts they are: 44px, one hairline border, translucent white, ink text. It
   used to be a 48px near-black pill at weight 780 -- heavier than the page
   title beside it, and matching nothing else in the row. */
.analytics-view-picker select {
  width: 100%;
  min-height: 44px;
  height: 44px;
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--green-900);
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  padding: 0 40px 0 16px;
  cursor: pointer;
}

.analytics-view-picker select:hover {
  border-color: var(--chart-1);
  background: rgba(255, 255, 255, 0.86);
}

.analytics-view-picker select:focus {
  border-color: var(--gold);
  box-shadow:
    0 0 0 3px rgba(var(--gold-rgb), 0.22),
    0 12px 28px rgba(var(--green-900-rgb), 0.18);
  outline: 0;
}

.analytics-view-picker select option {
  background: var(--paper);
  color: var(--green-900);
}

.topbar-inline-action {
  flex: 0 0 auto;
}

#trackingLinkBuilderToggle {
  position: relative;
}

#trackingLinkBuilderToggle[hidden] {
  display: none !important;
}

.topbar-inline-status {
  display: inline-block;
  margin-top: 8px;
}

.topbar-inline-status[hidden] {
  display: none !important;
}

.toolbar {
  display: flex;
  align-items: end;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: start;
  position: relative;
  justify-self: end;
  align-self: end;
  width: fit-content;
  max-width: 100%;
}

.date-controls,
.filter-fields {
  display: flex;
  align-items: end;
  gap: 9px;
  flex-wrap: wrap;
}

.filter-toggle {
  flex: 0 0 auto;
}

.filter-drawer {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 46;
  width: min(980px, calc(100vw - 360px));
  max-width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.toolbar[data-toolbar-context="topbar"] .filter-drawer {
  left: auto;
  right: 0;
  width: min(980px, calc(100vw - 120px));
  max-width: min(980px, calc(100vw - 120px));
}

.filter-drawer-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(var(--ink-rgb), 0.18);
  /* NOT overflow: hidden. Every <select> in here is upgraded to the .wh-select
     facade, whose list is a positioned child rather than an OS-drawn menu, so
     a clipping ancestor makes it invisible instead of letting it escape. The
     Landing filter's list is ~250px and this panel is ~200px tall, so it was
     wholly clipped. Nothing in here paints outside the radius (the header and
     content are transparent), so there is nothing to clip. The mobile bottom
     sheet below re-adds overflow: hidden -- there the panel really is a
     scroll container. */
  overflow: visible;
}

.filter-drawer-content {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.filter-drawer-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}

.filter-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: transparent;
}

.dashboard-body.filter-drawer-open .toolbar[data-toolbar-context="topbar"] .filter-drawer {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.toolbar[data-toolbar-context="overview-card"] .filter-toggle,
.toolbar[data-toolbar-context="overview-popover"] .filter-toggle {
  display: none;
}

.toolbar[data-toolbar-context="overview-card"] .filter-drawer,
.toolbar[data-toolbar-context="overview-popover"] .filter-drawer {
  position: static;
  width: auto;
  max-width: none;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  display: contents;
}

.toolbar[data-toolbar-context="overview-card"] .filter-drawer-panel,
.toolbar[data-toolbar-context="overview-popover"] .filter-drawer-panel {
  display: contents;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.toolbar[data-toolbar-context="overview-card"] .filter-drawer-content,
.toolbar[data-toolbar-context="overview-popover"] .filter-drawer-content {
  display: grid;
  gap: 14px;
  padding: 0;
}

.toolbar[data-toolbar-context="overview-card"] .filter-drawer-header,
.toolbar[data-toolbar-context="overview-popover"] .filter-drawer-header {
  display: none;
}

.dashboard-body.settings-view .toolbar {
  display: none;
}

.toolbar label {
  width: 142px;
  gap: 6px;
}

.toolbar label.wide-filter {
  width: 210px;
}

.toolbar input,
.toolbar select {
  width: 100%;
  height: 44px;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.82);
  color: var(--green-900);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(var(--ink-rgb), 0.045);
  font-size: 14px;
  font-weight: 760;
  line-height: 1;
}

.toolbar input:hover,
.toolbar select:hover {
  border-color: rgba(var(--ink-rgb), 0.34);
  background-color: rgba(255, 255, 255, 0.94);
}

.toolbar input:focus,
.toolbar select:focus {
  border-color: var(--gold);
  box-shadow:
    0 0 0 3px rgba(var(--gold-rgb), 0.2),
    0 10px 22px rgba(var(--ink-rgb), 0.07);
  outline: 0;
}

.toolbar input[type="date"] {
  color-scheme: light;
  padding: 0 12px 0 14px;
}

.toolbar input[type="date"]::-webkit-calendar-picker-indicator {
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.82;
  padding: 4px;
}

.toolbar input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background: var(--sage-200);
  opacity: 1;
}

.toolbar select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2317372f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  padding: 0 42px 0 14px;
}

.toolbar select option {
  background: var(--paper);
  color: var(--green-900);
  font-weight: 700;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.toolbar-actions > .analysis-button,
.toolbar-actions > .icon-button {
  position: relative;
}

.toolbar-actions > [hidden],
.toolbar-actions > .analysis-button[hidden],
.toolbar-actions > .icon-button[hidden],
.toolbar-actions > a[hidden] {
  display: none !important;
}

.analysis-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--green-800);
  border-radius: 999px;
  background: var(--green-800);
  color: var(--white);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(var(--green-800-rgb), 0.14);
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.analysis-button:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green-900);
  box-shadow: 0 14px 28px rgba(var(--gold-rgb), 0.22);
  transform: translateY(-1px);
}

.dashboard-body.non-reporting-view:not(.logs-view) #analyzePageBtn {
  display: none;
}

.icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--green-900);
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.icon-button:hover {
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--white);
  box-shadow: 0 12px 24px rgba(var(--ink-rgb), 0.16);
  transform: translateY(-1px);
}

@media (hover: hover) {
  .toolbar-actions > [aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, -6px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(var(--green-900-rgb), 0.94);
    color: var(--paper);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 28px rgba(var(--green-900-rgb), 0.22);
    font-size: 12px;
    font-weight: 760;
    line-height: 1;
    transition:
      opacity 0.16s ease,
      transform 0.16s ease;
    z-index: 8;
  }

  .toolbar-actions > [aria-label]::before {
    content: "";
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translate(-50%, -6px);
    opacity: 0;
    pointer-events: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(var(--green-900-rgb), 0.94);
    transition:
      opacity 0.16s ease,
      transform 0.16s ease;
    z-index: 8;
  }

  .toolbar-actions > [aria-label]:hover::after,
  .toolbar-actions > [aria-label]:hover::before,
  .toolbar-actions > [aria-label]:focus-visible::after,
  .toolbar-actions > [aria-label]:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--green-900);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(var(--ink-rgb), 0.18);
}

.theme-toggle-track {
  width: 42px;
  height: 24px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(var(--green-800-rgb), 0.18);
  border: 1px solid var(--line);
}

.theme-toggle-track span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green-800);
  transform: translateX(0);
  transition:
    transform 0.18s ease,
    background 0.18s ease;
}

.theme-toggle-glyph {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: currentColor;
  opacity: 0.56;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.theme-toggle-glyph svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.1;
}

.theme-toggle-glyph:first-child {
  opacity: 1;
}

.floating-theme-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
}

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

.metric-grid:empty {
  display: none;
}

.metric-card,
.panel,
.table-panel,
.connector-card,
.setting-block,
.overview-filter-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

.metric-card {
  padding: 16px;
  min-height: 104px;
}

.metric-card .label {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.metric-card .value {
  margin: 0;
  font-size: 28px;
  font-weight: 850;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.view-content {
  display: grid;
  gap: 16px;
}

.overview-dashboard-focus {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.overview-dashboard-focus-popout {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}

.overview-filter-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 15px;
  padding: 16px;
}

.overview-filter-card h2 {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.12;
}

.overview-filter-card .toolbar {
  display: grid;
  gap: 12px;
  align-items: stretch;
}

.overview-filter-card .date-controls,
.overview-filter-card .filter-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.overview-filter-card .toolbar label,
.overview-filter-card .toolbar label.wide-filter {
  width: 100%;
}

.overview-filter-card .toolbar-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
  gap: 8px;
}

.overview-filter-card .analysis-button {
  width: 100%;
  min-width: 0;
}

.overview-filter-card .filter-drawer {
  display: block;
}

.overview-controls-backdrop {
  position: fixed;
  inset: 0;
  z-index: 34;
  background: rgba(18, 37, 30, 0.18);
  backdrop-filter: blur(5px);
}

.overview-controls-backdrop[hidden] {
  display: none;
}

.overview-controls-popover {
  position: fixed;
  top: 118px;
  right: clamp(24px, 4vw, 42px);
  z-index: 35;
  width: min(420px, calc(100vw - 48px));
  max-height: min(82vh, 760px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(var(--ink-rgb), 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px) scale(0.98);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  overflow: hidden;
}

.dashboard-body.overview-controls-open .overview-controls-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.overview-controls-popover-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 18px 14px;
  border-bottom: 1px solid var(--line);
}

.overview-controls-popover-header h2,
.overview-controls-section-heading h3 {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.12;
}

.overview-controls-popover-header h2 {
  font-size: 24px;
}

.overview-controls-popover-body {
  display: grid;
  gap: 16px;
  padding: 16px 18px 18px;
  overflow: auto;
}

.overview-controls-section {
  display: grid;
  gap: 12px;
}

.overview-controls-section + .overview-controls-section {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.overview-controls-section-heading {
  display: grid;
  gap: 4px;
}

.overview-controls-section-heading .eyebrow {
  margin-bottom: 0;
}

.overview-controls-popover .toolbar {
  display: grid;
  gap: 12px;
  align-items: stretch;
}

.overview-controls-popover .date-controls,
.overview-controls-popover .filter-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.overview-controls-popover .toolbar label,
.overview-controls-popover .toolbar label.wide-filter {
  width: 100%;
}

.overview-controls-popover .toolbar-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
  gap: 8px;
}

.overview-controls-popover .analysis-button {
  width: 100%;
  min-width: 0;
}

.overview-controls-popover .filter-drawer {
  display: block;
}

.tracking-link-builder-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(18, 37, 30, 0.18);
  backdrop-filter: blur(5px);
}

.tracking-link-builder-backdrop[hidden] {
  display: none;
}

.tracking-link-builder-popover {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 41;
  width: min(640px, 100vw);
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 28px 80px rgba(var(--ink-rgb), 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateX(28px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  overflow: hidden;
}

.dashboard-body.tracking-link-builder-open .tracking-link-builder-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.tracking-link-builder-popover-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 18px 14px;
}

.tracking-link-builder-popover-header h2 {
  margin-bottom: 0;
}

.tracking-link-builder-popover-body {
  padding: 16px 18px 18px;
  overflow: auto;
}

.overview-chart-heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.overview-controls-trigger {
  flex: 0 0 auto;
  min-height: 44px;
  align-self: start;
  box-shadow: 0 10px 26px rgba(var(--ink-rgb), 0.08);
}

.overview-graph-controls {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.overview-graph-control-grid {
  display: grid;
  gap: 10px;
}

.overview-metric-list {
  display: grid;
  gap: 8px;
}

.metric-toggle {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sage-100);
  color: var(--green-900);
  font-size: 13px;
  font-weight: 800;
}

.metric-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--green-800);
}

.chart-guidance,
.chart-current-type {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

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

.chart-current-type {
  font-weight: 850;
  color: var(--green-800);
}

.panel-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.website-summary-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 16px;
}

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

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

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

.panel,
.table-panel,
.setting-block {
  padding: 16px;
  min-width: 0;
}

.table-panel-tight-top {
  padding-top: 0;
}

.setting-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.setting-block-head > div {
  min-width: 0;
}

.setting-block-head h2 {
  margin-bottom: 8px;
}

.setting-block-head .primary-btn {
  flex: 0 0 auto;
  margin-top: 6px;
}

.passkey-panel {
  display: grid;
  gap: 16px;
}

.passkey-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.passkey-panel-header h2 {
  margin: 0 0 6px;
}

.passkey-icon-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
}

.passkey-icon-btn span {
  display: none;
}

.passkey-verification-modal-open {
  overflow: hidden;
}

.passkey-verification-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}

.passkey-verification-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--green-900-rgb), 0.56);
  backdrop-filter: blur(6px);
}

.passkey-verification-dialog {
  position: relative;
  width: min(460px, 100%);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  /* Client themes define --paper as the solid dialog surface. --panel is not
     a shared token, so using it left Support Squad's modal transparent. */
  background: var(--paper, #fffdf8);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(var(--green-900-rgb), 0.34);
}

.passkey-verification-dialog h2 {
  margin: 4px 32px 10px 0;
}

.passkey-verification-dialog .setup-copy {
  margin-bottom: 22px;
}

.passkey-verification-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.passkey-verification-close:hover,
.passkey-verification-close:focus-visible {
  background: var(--sage-100);
  color: var(--ink);
}

.passkey-verification-field {
  display: grid;
  gap: 7px;
}

.passkey-verification-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.passkey-verification-field input {
  width: 100%;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

.passkey-verification-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.passkey-verification-dialog .status-line:empty {
  display: none;
}

.passkey-list {
  display: grid;
  gap: 10px;
}

.passkey-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.66);
}

.passkey-meta {
  display: grid;
  gap: 4px;
}

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

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

.passkey-empty {
  margin: 0;
}

.status-line.error {
  color: #a33a24;
}

.status-line.success {
  color: var(--green-800);
}

.status-line.warning {
  color: var(--amber, #8a6416);
}

.panel h2,
.table-panel h2,
.setting-block h2,
.connector-card h3 {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.18;
}

.website-summary-panel {
  align-self: start;
}

.link-tree-shell {
  display: grid;
  gap: 16px;
}

.link-tree-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.link-tree-action-button {
  position: relative;
}

.link-tree-top-actions #openLinkTreeAdd {
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--white);
}

.link-tree-public-card,
.link-tree-links-panel {
  padding: 18px;
}

.link-tree-links-panel > .panel-title-row > div {
  flex: 1 1 auto;
  min-width: 0;
}

.link-tree-links-panel > .panel-title-row p {
  max-width: none;
  margin-top: 4px;
  white-space: nowrap;
}

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

.link-tree-url-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.link-tree-url-row .button-row {
  margin-top: 0;
}

.link-tree-url-box {
  min-width: 0;
  flex: 1 1 320px;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sage-100);
}

.link-tree-url-box strong {
  color: var(--ink);
  font-size: 15px;
  word-break: break-all;
}

.event-public-card .link-tree-url-box {
  padding-block: 10px;
}

.link-tree-popout-backdrop,
.event-popout-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(10, 22, 18, 0.34);
  backdrop-filter: blur(5px);
}

.link-tree-popout,
.event-popout {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 71;
  width: min(720px, calc(100vw - 48px));
  max-height: min(84vh, 820px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(var(--ink-rgb), 0.2);
  transform: translate(-50%, -50%);
}

.event-popout {
  width: min(760px, calc(100vw - 48px));
  max-height: min(88vh, 860px);
}

.event-popout.event-drawer {
  top: 0;
  left: auto;
  inset: 0 0 0 auto;
  width: min(640px, 100vw);
  max-height: none;
  height: 100dvh;
  border-width: 0 0 0 1px;
  border-radius: 0;
  transform: none;
  animation: event-drawer-in 0.18s ease-out;
}

@keyframes event-drawer-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.link-tree-popout-header,
.event-popout-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}

.link-tree-popout-header h2,
.link-tree-popout-header p,
.event-popout-header h2,
.event-popout-header p {
  margin: 0;
}

.link-tree-popout-header p,
.event-popout-header p {
  margin-top: 6px;
  color: var(--muted);
}

.link-tree-popout-body,
.event-popout-body {
  min-height: 0;
  overflow: auto;
  padding: 18px 20px 20px;
}

.link-tree-table-scroll {
  margin: 0 -18px -18px;
  width: calc(100% + 36px);
  max-width: none;
}

.link-tree-table {
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}

.link-tree-table th:first-child,
.link-tree-table td:first-child {
  padding-left: 18px;
}

.link-tree-table th:last-child,
.link-tree-table td:last-child {
  padding-right: 18px;
}

.link-tree-table-row {
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.14s ease, opacity 0.14s ease;
}

.link-tree-table-row:hover {
  background: rgba(var(--green-700-rgb), 0.055);
}

.link-tree-table-row.is-dragging {
  opacity: 0.36;
}

.link-tree-table-row.drop-before td {
  box-shadow: inset 0 3px 0 var(--green-700);
}

.link-tree-table-row.drop-after td {
  box-shadow: inset 0 -3px 0 var(--green-700);
}

.link-tree-drag-column,
.link-tree-drag-cell {
  width: 42px;
  min-width: 42px;
  padding-right: 4px;
}

.link-tree-drag-handle {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: var(--muted);
  cursor: grab;
}

.link-tree-drag-handle:hover {
  color: var(--green-800);
  background: rgba(var(--green-700-rgb), 0.09);
}

.link-tree-drag-handle:active {
  cursor: grabbing;
}

.link-tree-drag-handle i,
.link-tree-drag-handle [data-lucide] {
  width: 18px;
  height: 18px;
}

.link-tree-name-cell {
  width: 37%;
  min-width: 0;
}

.link-tree-name-cell strong,
.link-tree-name-cell span {
  display: block;
}

.link-tree-name-cell strong {
  color: var(--ink);
  font-size: 14px;
}

.link-tree-name-cell span {
  max-width: 320px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.link-tree-url-cell {
  min-width: 0;
  max-width: none;
}

.link-tree-url-cell span {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
  white-space: normal;
}

.link-tree-table th:nth-child(2),
.link-tree-table td:nth-child(2) {
  width: 37%;
}

.link-tree-table th:nth-child(4),
.link-tree-status-cell {
  width: 72px;
}

.link-tree-actions-column,
.link-tree-actions-cell {
  width: 96px;
  text-align: right;
}

.link-tree-edit-button {
  min-height: 34px;
  padding: 7px 11px;
  white-space: nowrap;
}

.link-tree-edit-button i,
.link-tree-edit-button [data-lucide] {
  width: 15px;
  height: 15px;
}

.link-tree-edit-drawer {
  inset: 0 0 0 auto;
  width: min(520px, 100vw);
  max-height: none;
  height: 100dvh;
  border-width: 0 0 0 1px;
  border-radius: 0;
  transform: none;
  animation: link-tree-drawer-in 0.18s ease-out;
}

.link-tree-edit-drawer .link-tree-popout-body {
  padding-top: 22px;
}

.link-tree-edit-drawer .link-tree-popout-header .eyebrow {
  margin-bottom: 5px;
  color: var(--gold-700, var(--gold));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.link-tree-edit-actions {
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

@keyframes link-tree-drawer-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.events-shell {
  display: grid;
  gap: 18px;
}

.event-group-section {
  display: grid;
  gap: 12px;
}

.event-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px;
}

.event-group-header h2 {
  margin: 0;
  color: var(--green-900);
  font-size: 22px;
}

.event-group-list {
  display: grid;
  gap: 16px;
}

.event-manager-card {
  display: grid;
  gap: 16px;
}

/* One action group serves both breakpoints; tenant themes can override display-based hiding. */
.event-public-card {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title actions"
    "url url";
  column-gap: 16px;
}

.event-public-card > .panel-title-row {
  grid-area: title;
  align-items: center;
}

.event-public-card > .link-tree-url-row {
  grid-area: url;
}

.event-public-card > .event-card-actions {
  grid-area: actions;
  align-self: start;
}

.event-public-card > .status-line {
  grid-column: 1 / -1;
}

.event-public-card .event-card-title > .badge {
  transform: translateY(-4px);
  margin-bottom: 4px;
}

.event-card-title {
  flex: 1 1 320px;
  min-width: 0;
}

.event-card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.event-card-heading h2 {
  min-width: 0;
}

.event-card-tagline {
  margin-bottom: 4px;
  color: var(--green-800);
  font-weight: 700;
}

.event-public-card .panel-title-row p {
  max-width: none;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.event-card-actions {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.event-card-action.icon-button {
  width: auto;
  min-width: var(--control-h, 44px);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.event-card-action.icon-button svg {
  width: 17px;
  height: 17px;
}

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

/* Keep paired event-date fields aligned when only one has supporting copy. */
.event-slot-form {
  align-items: start;
}

.event-slot-section {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.event-slot-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

.event-slot-list {
  display: grid;
  gap: 10px;
}

.event-slot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
}

.event-slot-row strong,
.event-slot-row span {
  display: block;
}

.event-slot-row strong {
  color: var(--ink);
}

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

.event-slot-counts {
  min-width: 140px;
  text-align: right;
}

.event-slot-counts span {
  color: var(--text);
  font-weight: 750;
}

.event-registrations-popout {
  display: grid;
  gap: 14px;
}

.event-registrations-popout .panel-title-row h3,
.event-registrations-popout .panel-title-row p {
  margin: 0;
}

.event-registrations-popout .panel-title-row p {
  margin-top: 4px;
  color: var(--muted);
}

.newsletter-shell {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

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

.newsletter-list-panel,
.newsletter-editor-panel,
.newsletter-preview-panel,
.newsletter-links-panel,
.newsletter-quality-panel,
.newsletter-plain-text-panel {
  padding: 18px;
}

.newsletter-home-panel {
  padding: 18px;
}

.newsletter-home-list {
  display: grid;
  gap: 10px;
}

.newsletter-home-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.54);
  color: var(--ink);
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

/* The shared bare-button rule supplies pill-shaped corners to unclassed
   buttons. Newsletter entries are full-width cards, so keep a modest card
   radius instead of inheriting the global control radius. */
.view-content button.newsletter-home-row {
  border-radius: 8px !important;
}

.newsletter-home-row:hover {
  border-color: rgba(var(--ink-rgb), 0.22);
  box-shadow: 0 10px 24px rgba(var(--ink-rgb), 0.08);
}

.newsletter-home-row-main,
.newsletter-home-row-meta {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.newsletter-home-row-main strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.newsletter-home-row-main small,
.newsletter-home-row-meta small,
.newsletter-empty-state p {
  color: var(--muted);
}

.newsletter-home-row-meta {
  justify-items: end;
}

.newsletter-empty-state {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
}

.newsletter-empty-state h2,
.newsletter-empty-state p {
  margin: 0;
}

.newsletter-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(10, 22, 18, 0.34);
  backdrop-filter: blur(5px);
}

.newsletter-editor-popover {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  width: min(1080px, calc(100vw - 32px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--white);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(10, 22, 18, 0.22);
}

.newsletter-editor-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
}

.newsletter-editor-popover-header h2 {
  margin: 0;
  font-size: 22px;
}

.newsletter-editor-popover-body {
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.newsletter-home-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.newsletter-audience-backdrop {
  position: fixed;
  inset: 0;
  z-index: 72;
  background: rgba(10, 22, 18, 0.38);
  backdrop-filter: blur(5px);
}

.newsletter-audience-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 73;
  width: min(900px, calc(100vw - 32px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--white);
  border-left: 1px solid var(--line);
  box-shadow: -22px 0 56px rgba(10, 22, 18, 0.24);
  animation: newsletter-audience-drawer-in 0.18s ease-out;
}

.newsletter-audience-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
}

.newsletter-audience-drawer-header h2,
.newsletter-audience-drawer-header p {
  margin: 0;
}

.newsletter-audience-drawer-header h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 500;
}

.newsletter-audience-drawer-header .eyebrow {
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.newsletter-audience-drawer-header h2 + p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.newsletter-audience-drawer-body {
  min-height: 0;
  overflow: auto;
  padding: 20px 22px 28px;
}

.newsletter-audience-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.newsletter-audience-summary > div {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sage-100);
}

.newsletter-audience-summary strong {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
}

.newsletter-audience-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.newsletter-audience-section {
  margin-top: 14px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.46);
}

.newsletter-audience-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.newsletter-audience-section-heading h3,
.newsletter-audience-section-heading p {
  margin: 0;
}

.newsletter-audience-section-heading h3 {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 500;
}

.newsletter-audience-section-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.newsletter-audience-create-row {
  display: grid;
  grid-template-columns: minmax(180px, 280px) auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.newsletter-audience-create-row input,
.newsletter-people-heading input,
.newsletter-audience-section textarea {
  width: 100%;
}

.newsletter-audience-import-actions {
  align-items: center;
  margin-top: 9px;
}

.newsletter-people-heading {
  align-items: center;
}

.newsletter-people-heading input {
  width: min(280px, 42%);
}

.newsletter-audience-section .nl-bulk-bar label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.newsletter-audience-section .nl-bulk-bar select {
  min-width: 170px;
}

.newsletter-audience-table-wrap {
  max-height: min(48vh, 560px);
  background: var(--paper);
}

.newsletter-audience-table-wrap .nl-subs-table {
  width: 100%;
  min-width: 680px;
}

.newsletter-audience-empty-list,
.newsletter-audience-result-count {
  margin: 8px 0 0;
  font-size: 12px;
}

.newsletter-audience-empty-people {
  margin: 0;
  padding: 16px;
}

@keyframes newsletter-audience-drawer-in {
  from { transform: translateX(26px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.newsletter-draft-list {
  display: grid;
  gap: 10px;
}

.newsletter-draft-card {
  width: 100%;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--ink);
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.newsletter-draft-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--ink-rgb), 0.2);
  box-shadow: 0 12px 28px rgba(var(--ink-rgb), 0.08);
}

.newsletter-draft-card.active {
  border-color: rgba(var(--gold-rgb), 0.72);
  background: var(--sage-100);
  box-shadow: inset 3px 0 0 var(--gold);
}

.newsletter-draft-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

.newsletter-draft-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.newsletter-draft-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.newsletter-draft-meta small {
  color: var(--muted);
  font-size: 12px;
}

.newsletter-workspace {
  display: grid;
  gap: 16px;
}

.newsletter-editor-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.newsletter-editor-layout > .newsletter-editor-panel,
.newsletter-editor-layout > .newsletter-editor-side-column,
.newsletter-editor-side-column > .newsletter-quality-panel {
  height: 100%;
  box-sizing: border-box;
}

.newsletter-editor-panel .form-grid,
.newsletter-editor-panel .newsletter-readonly-grid {
  grid-template-columns: 1fr;
}

#newsletterForm textarea[name="notes"] {
  min-height: 132px;
}

.newsletter-editor-side-column {
  display: grid;
  gap: 16px;
}

.newsletter-content-tabs {
  padding: 18px;
}

.newsletter-sent-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.newsletter-sent-summary h2 { margin: 2px 0 4px; }
.newsletter-sent-summary p:last-child { margin: 0; color: var(--muted); }

.newsletter-tab-buttons {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.newsletter-tab-buttons .active {
  background: var(--sage-200);
  border-color: var(--green-800);
}

.newsletter-content-tabs .newsletter-template-actions {
  justify-content: flex-end;
  margin-top: 12px;
}
.newsletter-upload-btn { cursor: pointer; }
.newsletter-upload-btn input { display: none; }
.newsletter-html-tab-panel { display: none; }
.newsletter-html-tab-panel .newsletter-upload-field,
.newsletter-html-tab-panel .newsletter-template-actions,
.newsletter-html-tab-panel > label { margin-top: 12px; }

.newsletter-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.newsletter-preview-grid .newsletter-plain-text-panel {
  display: flex;
  flex-direction: column;
}

.newsletter-status-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.newsletter-inbox-preview {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sage-100);
}

.newsletter-inbox-preview,
#newsletterForm label:has(input[name="medium"]),
.newsletter-quality-panel .panel-title-row p,
.newsletter-quality-panel .panel-title-row > .badge,
.newsletter-quality-panel .newsletter-score-grid,
.newsletter-actions button[id="downloadTrackedHtmlBtn"],
.newsletter-actions button[id="copyTrackedHtmlBtn"],
.newsletter-actions button[id="downloadPlainTextBtn"],
.newsletter-actions button[id="copyPlainTextBtn"] {
  display: none;
}

.newsletter-inbox-preview span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.newsletter-inbox-preview strong {
  color: var(--ink);
}

.newsletter-inbox-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.newsletter-template-actions {
  align-items: center;
  margin-top: 0;
}

.newsletter-score-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.newsletter-score-grid div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sage-100);
}

.newsletter-score-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.newsletter-score-grid strong {
  color: var(--ink);
  font-size: 18px;
}

.newsletter-check-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.newsletter-check-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
}

.newsletter-check-item svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.newsletter-check-item.good svg {
  color: var(--green-800);
}

.newsletter-check-item.warn svg {
  color: #7c5a16;
}

.newsletter-check-item.error svg {
  color: #a33a24;
}

.newsletter-check-item strong,
.newsletter-check-item span {
  display: block;
}

.newsletter-check-item strong {
  color: var(--ink);
  margin-bottom: 3px;
}

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

.newsletter-domain-line {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.newsletter-plain-text-output {
  width: 100%;
  min-height: 220px;
  flex: 1 1 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  color: var(--ink);
  background: var(--sage-100);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.newsletter-upload-field input[type="file"] {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.62);
}

.newsletter-html-input {
  min-height: 360px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
}

.newsletter-html-label > span {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.18;
}

.newsletter-actions {
  align-items: stretch;
}

.newsletter-actions-below-preview #sendNewsletterBtn {
  margin-left: auto;
}
.newsletter-schedule-time { display: grid; gap: 7px; font-size: 13px; font-weight: 600; margin: 0 0 12px; }
.newsletter-schedule-time input { width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; }

.newsletter-template-actions {
  align-items: center;
}

.newsletter-preview-toggle {
  margin-top: 0;
}

.newsletter-preview-toggle .secondary-btn.active {
  background: var(--green-900);
  color: var(--paper);
  border-color: rgba(var(--ink-rgb), 0.42);
}

.newsletter-preview-frame-wrap {
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
}

.newsletter-preview-frame {
  width: 100%;
  min-height: 520px;
  border: 0;
  background: white;
}

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

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

.newsletter-links-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.newsletter-link-cell {
  display: grid;
  gap: 4px;
}

.newsletter-link-cell strong {
  color: var(--ink);
  font-size: 14px;
}

.newsletter-link-cell span,
.newsletter-link-url a {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

.newsletter-links-table code {
  font-size: 12px;
}

.button-row.compact {
  margin-top: 0;
}

.profile-identity {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.profile-identity-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--green-800) 12%, var(--paper));
  color: var(--green-900);
  border: 1px solid var(--line);
}

.profile-identity-avatar svg {
  width: 22px;
  height: 22px;
}

.profile-identity-copy {
  display: grid;
  gap: 2px;
}

.profile-identity-copy strong {
  font-size: 1rem;
  color: var(--ink);
}

.profile-identity-copy span {
  color: var(--muted);
  font-size: 0.85rem;
}

.profile-meta-table th {
  width: 42%;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

.profile-meta-table td {
  color: var(--ink);
  font-size: 14px;
  font-weight: 760;
  text-align: right;
  white-space: nowrap;
}

.profile-activity-panel table {
  font-size: 12.5px;
}

.website-metrics-table th {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  width: 62%;
}

.website-metrics-table td {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.chart-box {
  height: 320px;
  position: relative;
}

.chart-box.compact {
  height: 250px;
}

.chart-box.hero {
  height: 440px;
}

.test-analytics-hero .panel-title-row p {
  max-width: 620px;
}

.test-delta-list {
  display: grid;
  gap: 10px;
}

.test-delta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

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

.test-delta-row span {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.test-delta-row strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
}

.test-delta-row em {
  color: var(--blue);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.leak-bar-cell {
  min-width: 150px;
  display: grid;
  grid-template-columns: minmax(72px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.leak-bar-cell::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--sage-200);
}

.leak-bar {
  grid-column: 1;
  grid-row: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--chart-3);
}

.leak-bar-cell strong {
  grid-column: 2;
  color: var(--ink);
  font-size: 13px;
}

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

.coverage-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.45);
}

.coverage-card.good {
  border-color: rgba(var(--green-700-rgb), 0.22);
}

.coverage-card.warn {
  border-color: rgba(var(--gold-rgb), 0.32);
}

.coverage-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.coverage-card strong {
  color: var(--ink);
  line-height: 1.2;
}

.coverage-card p,
.coverage-card span,
.coverage-card em {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.coverage-card p {
  color: var(--text);
  font-weight: 800;
}

.hero-panel {
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(var(--paper-rgb), 0.98), rgba(var(--paper-rgb), 0.92)),
    var(--paper);
  border-left: 4px solid var(--gold);
}

.panel-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.panel-title-row h2 {
  margin-bottom: 0;
}

.panel-title-row p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.logs-title-row {
  align-items: start;
}

.logs-title-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.logs-title-headline {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logs-header-action {
  flex: 0 0 auto;
  min-height: 44px;
  align-self: start;
  box-shadow: 0 10px 26px rgba(var(--ink-rgb), 0.08);
}

.overview-support {
  grid-template-columns: 1fr 1fr;
}

.kpi-panel {
  min-height: 316px;
}

.kpi-chart {
  display: grid;
  gap: 13px;
}

.kpi-row {
  display: grid;
  gap: 7px;
}

.kpi-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.kpi-meta span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.kpi-meta strong {
  font-size: 18px;
  line-height: 1;
}

.kpi-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sage-200);
}

.kpi-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--chart-1);
}

.kpi-fill.color-1 {
  background: var(--chart-2);
}

.kpi-fill.color-2 {
  background: var(--chart-3);
}

.kpi-fill.color-3 {
  background: var(--chart-4);
}

.kpi-fill.color-4 {
  background: var(--chart-5);
}

.kpi-fill.color-5 {
  background: var(--chart-6);
}

.funnel {
  display: grid;
  gap: 9px;
}

.funnel-row {
  display: grid;
  grid-template-columns: 132px 1fr 88px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.funnel-track {
  height: 12px;
  background: var(--sage-200);
  border-radius: 99px;
  overflow: hidden;
}

.funnel-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-800), var(--gold));
}

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

.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  min-width: 680px;
}

.site-monitors-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.site-monitors-heading > div {
  min-width: 0;
}

.site-monitors-summary,
.site-monitors-results,
.site-monitors-results .table-scroll {
  min-width: 0;
}

@media (max-width: 640px) {
  .site-monitors-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .site-monitors-heading .primary-btn {
    width: 100%;
  }
}

/* Opt-in static-client landing page. It reuses Analytics and Tech Support
   routes, so these rules are presentation-only. */
.static-client-dashboard { display: grid; gap: 18px; }
.static-client-dashboard-intro { max-width: 680px; }
.static-client-dashboard-intro h2 { margin: 4px 0 8px; color: var(--ink); font-size: 26px; line-height: 1.2; }
.static-client-dashboard-intro p:last-child, .static-client-dashboard-card p { margin: 0; color: var(--muted); }
.static-client-dashboard-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.static-client-dashboard-card { display: grid; align-content: start; gap: 10px; min-width: 0; }
.static-client-dashboard-card > i { width: 24px; height: 24px; color: var(--green-700); }
.static-client-dashboard-card h3 { margin: 2px 0 0; color: var(--ink); }
.static-client-dashboard-card .primary-btn, .static-client-dashboard-card .secondary-btn { justify-self: start; margin-top: 4px; }

@media (max-width: 640px) {
  .static-client-dashboard-cards { grid-template-columns: 1fr; }
  .static-client-dashboard-card .primary-btn, .static-client-dashboard-card .secondary-btn { width: 100%; }
}

.empty-state {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--muted);
}

.empty-state strong { color: var(--ink); }
.empty-state p { margin: 0; }

.structured-cell { min-width: 150px; }
.structured-cell summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--green-800);
  cursor: pointer;
  font-weight: 750;
}
.structured-cell pre {
  max-width: min(560px, 75vw);
  max-height: 280px;
  margin: 4px 0 8px;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--cream);
  color: var(--ink);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#linksTable {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

#linksTable th,
#linksTable td,
#linksTable .table-sort {
  white-space: nowrap;
}

#linksTable .table-sort {
  display: block;
  width: 100%;
  text-align: left;
}

#linksTable th:nth-child(2),
#linksTable td:nth-child(2) {
  width: 32%;
  min-width: 0;
}

#linksTable th:nth-child(3),
#linksTable td:nth-child(3) {
  width: 40%;
  min-width: 0;
}

#linksTable td:nth-child(2),
#linksTable td:nth-child(3) {
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
  text-overflow: clip;
}

#linksTable td {
  vertical-align: middle;
}

#linksTable .tracking-link-row td:nth-child(2) {
  padding-left: 18px;
}
#linksTable .tracking-link-row td:nth-child(n+4):not(:last-child) {
  display: none;
}
#linksTable th:nth-child(n+4):not(:last-child) {
  display: none;
}
.tracking-link-drawer-overlay { position: fixed; z-index: 110; inset: 0; display: flex; justify-content: flex-end; background: rgba(16,36,30,.34); }
.tracking-link-drawer-backdrop { position: absolute; inset: 0; }
.tracking-link-drawer { position: relative; z-index: 1; width: min(520px, 100%); height: 100%; overflow-y: auto; background: var(--paper); box-shadow: -12px 0 32px rgba(var(--green-900-rgb), .18); }
.tracking-link-drawer > header { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px; border-bottom: 1px solid var(--line); }
.tracking-link-drawer h2 { margin: 2px 0 0; font-size: 22px; }
.tracking-link-drawer-body { display: grid; gap: 0; padding: 8px 24px 28px; }
.tracking-link-detail { padding: 15px 0; border-bottom: 1px solid var(--line); }
.tracking-link-detail dt { margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.tracking-link-detail dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.tracking-link-drawer-actions { padding: 0 24px 24px; }

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

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.table-sort {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  text-transform: inherit;
  letter-spacing: inherit;
  font-size: inherit;
  font-weight: 850;
}

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

.settings-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.settings-menu,
.settings-detail {
  min-width: 0;
}

.settings-detail {
  display: grid;
  gap: 16px;
}

.email-template-list {
  display: grid;
  gap: 8px;
}

.email-template-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 14px;
  color: var(--ink);
  text-align: left;
  background: var(--paper-soft, rgba(var(--paper-rgb), 0.64));
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.email-template-row:hover,
.email-template-row:focus-visible {
  border-color: var(--sage-500, #557560);
  background: var(--sage-50, #eff5ef);
}

.email-template-row-copy,
.email-template-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.email-template-row-copy {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.email-template-row-copy span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.email-template-row-meta {
  flex: 0 0 auto;
}

.email-template-drawer-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(680px, 100%);
}

.email-template-drawer-backdrop {
  background: rgba(20, 30, 25, 0.42);
}

.email-template-drawer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 56px rgba(var(--ink-rgb), 0.18);
  outline: 0;
}

.email-template-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

.email-template-drawer-header h2 {
  margin: 0;
}

.email-template-drawer-header .eyebrow {
  margin: 0 0 6px;
}

.email-template-drawer-actions,
.email-template-editor-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.email-template-drawer-body {
  display: grid;
  align-content: start;
  gap: 18px;
  overflow: auto;
  padding: 20px;
}

.email-template-drawer-body h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.email-template-read-only {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.email-template-delivery-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
  background: var(--gold-50, #fbf6e8);
  border: 1px solid var(--gold-200, #e7d6aa);
  border-radius: 8px;
}

.email-template-subject {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  background: var(--paper-soft, #f7f5ef);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.email-template-subject span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.email-template-preview-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.email-template-preview-tabs button {
  min-height: 36px;
  padding: 7px 10px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.email-template-preview-tabs button.active {
  color: var(--ink);
  background: var(--sage-50, #eff5ef);
  border-color: var(--sage-500, #557560);
}

.email-template-preview-mount {
  min-height: 240px;
}

.email-template-preview-frame {
  display: block;
  width: 100%;
  height: min(58dvh, 640px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f6f0;
}

.email-template-copy {
  max-width: 100%;
  max-height: 54dvh;
  margin: 0;
  padding: 14px;
  overflow: auto;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--paper-soft, #f7f5ef);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.email-template-html summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 700;
}

.email-template-html .email-template-copy {
  margin-top: 10px;
}

.email-template-editor {
  display: grid;
  gap: 16px;
}

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

.email-template-editor-head h3,
.email-template-test-panel h3 {
  margin: 0 0 6px;
}

.email-template-editor label,
.email-template-test-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 700;
}

.email-template-editor textarea {
  width: 100%;
  min-height: 0;
  resize: vertical;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.email-template-test-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: var(--sage-50, #eff5ef);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.email-template-test-panel > div > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.email-template-test-form {
  display: grid;
  gap: 12px;
}

.email-template-test-form .checkbox-row {
  display: flex;
  align-items: flex-start;
  font-size: 13px;
  font-weight: 500;
}

.email-template-reset {
  justify-self: start;
}

@media (max-width: 680px) {
  .email-template-row {
    align-items: flex-start;
  }

  .email-template-row-meta {
    padding-top: 2px;
  }

  .email-template-row-meta .badge {
    display: none;
  }

  .email-template-drawer-overlay {
    grid-template-columns: 1fr;
    align-items: end;
  }

  .email-template-drawer-backdrop {
    grid-area: 1 / 1;
  }

  .email-template-drawer {
    grid-area: 1 / 1;
    align-self: end;
    max-height: min(88dvh, 760px);
    border-top: 1px solid var(--line);
    border-left: 0;
    border-radius: 18px 18px 0 0;
  }

  .email-template-drawer-header,
  .email-template-editor-head {
    display: grid;
  }

  .email-template-drawer-actions .secondary-btn {
    flex: 1 1 auto;
  }

  .email-template-preview-frame {
    height: 48dvh;
  }
}

.settings-menu {
  position: sticky;
  top: 28px;
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--soft-shadow);
}

.settings-menu section {
  display: grid;
  gap: 0;
}

.admin-tabs {
  display: grid;
  gap: 5px;
}

.admin-tabs button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(var(--ink-rgb), 0.78);
  border-radius: 8px;
  padding: 9px 10px;
  text-align: left;
  font-weight: 780;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.admin-tabs button:hover {
  background: var(--sage-100);
  color: var(--green-900);
  box-shadow:
    inset 2px 0 0 rgba(var(--gold-rgb), 0.55),
    0 10px 20px rgba(var(--ink-rgb), 0.08);
  transform: translateX(2px);
}

.admin-tabs button.active {
  background: var(--green-800);
  color: var(--white);
  box-shadow: inset 3px 0 0 var(--gold);
}

.admin-tabs svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.setup-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 14px;
}

.setup-hero h2 {
  margin-bottom: 8px;
}

.setup-hero p,
.setup-copy {
  max-width: 760px;
  margin: 0 0 16px;
  color: var(--muted);
}

.setup-score {
  min-width: 138px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sage-100);
  text-align: center;
}

.setup-score strong {
  display: block;
  color: var(--green-800);
  font-size: 34px;
  line-height: 1;
}

.setup-score span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.settings-detail .form-grid,
.settings-detail .connector-grid,
.settings-detail .panel-grid,
.settings-detail .three-grid {
  grid-template-columns: 1fr;
}

.connector-purpose,
.connection-help p,
.privacy-note,
.field-help,
.setup-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

.plugin-settings-group {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.plugin-settings-group > h3 {
  margin: 0;
  color: var(--green-900);
  font-size: 16px;
}

.plugin-settings-list {
  display: grid;
  gap: 10px;
}

.plugin-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
}

.plugin-settings-row h3,
.plugin-settings-row p {
  margin: 0;
}

.plugin-settings-row h3 {
  color: var(--ink);
  font-size: 16px;
}

.plugin-settings-row p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.plugin-settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.plugin-toggle {
  min-width: 124px;
  justify-content: flex-end;
}

.password-vault-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--line);
}

.password-vault-hero h2 {
  margin-bottom: 8px;
}

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

.password-vault-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.6fr);
  gap: 34px;
  align-items: start;
  padding-top: 24px;
}

.password-vault-panel {
  display: grid;
  gap: 18px;
  align-content: start;
  min-height: 0;
}

.password-vault-panel h2 {
  margin: 0;
}

.vault-status-list {
  display: grid;
  gap: 18px;
}

.vault-status-list p {
  margin: 0;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.vault-status-list p:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.vault-status-list strong,
.vault-status-list span {
  display: block;
}

.vault-status-list strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.vault-status-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.password-vault-frame-shell {
  min-height: 720px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--soft-shadow);
}

.password-vault-frame-shell.integrated {
  min-height: calc(100vh - 230px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.password-vault-frame {
  display: block;
  width: 100%;
  min-height: 720px;
  border: 0;
  background: var(--paper);
}

.password-vault-frame-shell.integrated .password-vault-frame {
  min-height: calc(100vh - 230px);
  background: transparent;
}

.password-vault-native-state {
  display: grid;
  place-items: center;
  min-height: 360px;
  text-align: center;
}

.password-vault-native-state h2 {
  margin: 0;
}

.native-vault-shell {
  display: grid;
  gap: 18px;
}

.native-vault-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.native-vault-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: min(736px, 100%);
  padding: 10px 12px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  border-radius: 999px;
  background: rgba(var(--paper-rgb), 0.96);
  box-shadow: 0 8px 22px rgba(var(--green-900-rgb), 0.08);
  color: var(--green-900);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.native-vault-search:focus-within {
  border-color: rgba(var(--gold-rgb), 0.74);
  background: var(--paper);
  box-shadow:
    0 0 0 3px rgba(var(--gold-rgb), 0.18),
    0 12px 26px rgba(var(--green-900-rgb), 0.1);
}

.native-vault-search input {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.native-vault-search input:focus {
  outline: none;
  box-shadow: none;
}

.native-vault-search input::placeholder {
  color: rgba(var(--text-rgb), 0.6);
}

.native-vault-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.525fr) minmax(0, 1fr);
  gap: 28px;
  min-height: max(520px, calc(100vh - 210px));
}

.native-vault-list-layout {
  grid-template-columns: minmax(260px, 0.525fr);
  max-width: 680px;
}

.native-vault-list {
  display: grid;
  align-content: start;
  gap: 2px;
  border-right: 1px solid var(--line);
  padding-right: 18px;
}

.native-vault-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.native-vault-row strong,
.native-vault-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-vault-row strong {
  color: var(--ink);
  font-size: 15px;
}

.native-vault-row.directory-row-company-only strong {
  font-size: 15px;
  font-weight: 700;
}

.native-vault-row small {
  color: var(--muted);
  font-size: 12px;
}

.native-vault-row .directory-row-eyebrow {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.native-vault-row.active strong,
.native-vault-row:hover strong {
  color: var(--gold);
}

.native-vault-detail {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 22px;
}

.native-vault-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.native-vault-detail-head h2 {
  margin: 0;
}

#directoryDetail .native-vault-detail-head > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

#directoryDetail .native-vault-detail-head > .button-row {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.native-vault-fields {
  display: grid;
  gap: 14px;
}

.native-vault-fields > div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* Keep every copy action in a single right-hand rail. The password eye uses
   the column immediately to its left, so these controls never shift when a
   field has just one action. */
.native-vault-fields > div > .native-vault-copy { grid-column: 4; }
.native-vault-fields > div > .native-vault-reveal { grid-column: 3; }

.native-vault-fields > div.wide {
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: start;
}

.native-vault-fields span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.native-vault-fields strong,
.native-vault-fields a,
.native-vault-fields p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
}

/* Directory details read as stacked label/value rows. Every copy action sits
   in one right-hand rail aligned with the archive action in the detail head. */
#directoryDetail .native-vault-fields > div {
  grid-template-columns: minmax(0, 1fr) 44px;
  column-gap: 10px;
  row-gap: 3px;
  justify-content: stretch;
  align-items: center;
}

#directoryDetail .native-vault-fields > div > span {
  grid-column: 1;
  grid-row: 1;
}

#directoryDetail .native-vault-fields > div > strong,
#directoryDetail .native-vault-fields > div > a {
  grid-column: 1;
  grid-row: 2;
}

#directoryDetail .native-vault-fields > div > .icon-button {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  margin-top: 0;
}

#directoryDetail .native-vault-detail-head .eyebrow {
  margin-bottom: 0;
}

#directoryDetail .dir-detail-credentials > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#directoryDetail .dir-detail-notes {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.vault-totp-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  letter-spacing: 0;
}

.vault-totp-countdown {
  min-width: 36px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.native-vault-form {
  display: grid;
  gap: 18px;
}

.password-vault-modal-open {
  overflow: hidden;
}

.native-vault-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: start center;
  padding: clamp(24px, 7vh, 72px) clamp(16px, 3vw, 40px);
}

.native-vault-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--green-900-rgb), 0.56);
  backdrop-filter: blur(6px);
}

.native-vault-modal {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 820px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(var(--green-900-rgb), 0.34);
}

.password-vault-drawer-open {
  overflow: hidden;
}

.native-vault-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: flex-end;
}

.native-vault-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--green-900-rgb), 0.38);
  backdrop-filter: blur(3px);
}

.native-vault-drawer {
  position: relative;
  z-index: 1;
  width: min(620px, 100vw);
  height: 100dvh;
  overflow-y: auto;
  padding: clamp(20px, 3vw, 36px);
  background: var(--paper);
  color: var(--text);
  border-left: 1px solid var(--line);
  box-shadow: -22px 0 64px rgba(var(--green-900-rgb), 0.24);
}

.native-vault-drawer-content {
  min-height: 100%;
}

.native-vault-drawer-actions {
  justify-content: flex-end;
}

.native-vault-modal .native-vault-detail-head {
  align-items: center;
}

.native-vault-modal .button-row {
  align-items: center;
}

.native-vault-form .form-grid {
  grid-template-columns: 1fr;
}

.native-vault-form .form-grid > label {
  grid-column: 1 / -1;
}

.native-vault-empty {
  display: grid;
  place-items: center;
  min-height: 240px;
  color: var(--muted);
  text-align: center;
}

.vault-group-list {
  display: grid;
  gap: 14px;
}

.vault-group-card {
  display: grid;
  gap: 14px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}

.vault-group-card:first-child {
  padding-top: 0;
  border-top: 0;
}

.vault-group-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.vault-user-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.vault-user-checkbox {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.38);
}

.vault-user-checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--green-800);
}

.vault-user-checkbox strong,
.vault-user-checkbox small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-user-checkbox strong {
  color: var(--ink);
  font-size: 13px;
}

.vault-user-checkbox small {
  color: var(--muted);
  font-size: 12px;
}

.friendly-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}

.setup-note {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sage-100);
}

.setup-note strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.setup-note ol,
.setup-note ul,
.plain-checklist {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.insight-hero .setup-score {
  min-width: 112px;
}

.insight-section {
  display: grid;
  gap: 12px;
}

.insight-list {
  display: grid;
  gap: 12px;
}

.insight-card,
.insight-action-list article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sage-100);
}

.insight-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 8px;
}

.insight-card h3,
.insight-action-list h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.insight-card p,
.insight-action-list p {
  margin: 7px 0 0;
  color: var(--text);
  font-size: 13px;
}

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

.ai-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(10, 22, 18, 0.28);
}

.ai-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 31;
  width: min(620px, calc(100vw - 28px));
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -22px 0 60px rgba(var(--ink-rgb), 0.18);
  transform: translateX(105%);
  transition: transform 0.2s ease;
}

.dashboard-body.ai-drawer-open .ai-drawer {
  transform: translateX(0);
}

.ai-drawer-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

.ai-drawer-header h2 {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
}

.ai-drawer-content {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
  padding: 18px;
}

.ai-drawer-content .panel,
.ai-drawer-content .setting-block {
  box-shadow: none;
}

.ai-drawer-content .panel-grid,
.ai-drawer-content .insight-action-list {
  grid-template-columns: 1fr;
}

.ai-context-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
}

.ai-context-list p {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.ai-context-list strong {
  color: var(--green-900);
}

.field-help {
  display: block;
  margin-top: -2px;
}

label.inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

label.inline-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
}

label.checkbox-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: fit-content;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

label.checkbox-row input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
}

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

.form-grid .wide {
  grid-column: 1 / -1;
}
.custom-destination-url {
  width: 100%;
  min-width: 0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.user-action-row {
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 0;
  white-space: nowrap;
}

.user-contact-link {
  color: inherit;
  font-weight: 760;
  text-decoration: none;
  text-underline-offset: 3px;
}

.user-contact-link:hover,
.user-contact-link:focus-visible {
  color: var(--green-800);
  text-decoration: underline;
}

.user-action-btn {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--green-900);
  box-shadow: none;
  flex: 0 0 auto;
}

.user-action-btn:hover {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(var(--ink-rgb), 0.34);
}

.user-action-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.copy-box {
  width: 100%;
  min-height: 84px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

.connector-card {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.connector-card header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.connector-card header > div {
  min-width: min(100%, 260px);
}

.connection-help {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 8px;
  background: var(--sage-100);
}

.connector-form {
  display: grid;
  gap: 11px;
  margin-top: 12px;
}

.connection-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.32);
}

.connection-panel summary {
  color: var(--green-800);
  cursor: pointer;
  font-weight: 850;
}

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

.connector-fieldset h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.advanced-setup {
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.36);
}

.advanced-setup summary {
  color: var(--green-800);
  cursor: pointer;
  font-weight: 800;
}

.advanced-setup label,
.advanced-setup p {
  margin-top: 10px;
}

.connector-sync-line {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.connector-form-status {
  min-height: 22px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.connector-form-status.success {
  color: var(--green-800);
}

.connector-form-status.error {
  color: #a33a24;
}

.connector-form-status.info {
  color: var(--blue);
}

code {
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--sage-100);
  color: var(--ink);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--sage-200);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.badge.good {
  background: rgba(var(--green-700-rgb), 0.16);
  color: var(--green-800);
}

.badge.warn {
  background: rgba(var(--gold-rgb), 0.18);
  color: #7c5a16;
}

.badge.info {
  background: rgba(95, 127, 150, 0.16);
  color: var(--blue);
}

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

.mini-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}

.status-line {
  min-height: 22px;
  color: var(--teal);
  font-weight: 750;
}

/* Template Sender: a focused compose-and-review layout. The contact and
   content fields use the shared form styles above; these rules only establish
   the review boundary that prevents a draft from looking already sent. */
.template-sender-shell {
  display: grid;
  gap: 16px;
}

.template-sender-hero,
.template-sender-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.template-sender-hero {
  padding: 20px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(var(--green-700-rgb), .15), rgba(255,255,255,.6));
}

.template-sender-hero h2,
.template-sender-card-heading h2 { margin: 2px 0 5px; color: var(--ink); }
.template-sender-hero p:not(.eyebrow),
.template-sender-card-heading p:not(.eyebrow) { margin: 0; color: var(--muted); max-width: 720px; }
.template-sender-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.template-sender-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); gap: 16px; align-items: start; }
.template-sender-compose,
.template-sender-review,
.template-sender-editor { padding: 20px; }
.template-sender-form { display: grid; gap: 13px; margin-top: 18px; }
.template-sender-form > label { display: grid; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 800; }
.template-sender-form textarea[name="body"],
.template-sender-form textarea[name="body_markdown"] { min-height: 260px; font-family: inherit; line-height: 1.55; }
.template-sender-merge-help,
.template-sender-delivery-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.template-sender-merge-help i,
.template-sender-delivery-note i { flex: 0 0 auto; width: 16px; color: var(--green); }
.template-sender-merge-help code { white-space: nowrap; }
.template-sender-ai-paste { padding: 12px; border: 1px dashed var(--line-strong); border-radius: 9px; background: rgba(255,255,255,.38); }
.template-sender-ai-paste summary { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--green-800); font-weight: 800; }
.template-sender-ai-paste summary i { width: 16px; }
.template-sender-ai-paste p { margin: 10px 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.template-sender-ai-paste textarea { width: 100%; min-height: 130px; margin-bottom: 8px; box-sizing: border-box; }
.template-sender-preview { display: grid; gap: 12px; min-height: 260px; margin: 18px 0; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.5); }
.template-sender-preview-meta { display: grid; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.template-sender-preview-meta span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.template-sender-preview-meta b { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.template-sender-preview-body { color: var(--text); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.template-sender-empty { margin: auto 0; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.5; }
.template-sender-confirm { width: 100%; margin-bottom: 12px; align-items: flex-start; }
.template-sender-confirm input { margin-top: 2px; }
.template-sender-send { width: 100%; }
.template-sender-send:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

@media (max-width: 860px) {
  .template-sender-grid { grid-template-columns: 1fr; }
  .template-sender-hero { flex-direction: column; }
  .template-sender-hero-actions { justify-content: flex-start; }
}

/* Method-neutral Template Sender library and focused send drawer. */
.template-sender-library { display: grid; gap: 18px; }
.template-sender-library-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 2px 2px; }
.template-sender-library-header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.topbar-heading-row .template-sender-library-header-actions { display: contents; }
.template-sender-library-card { padding: 0; overflow: hidden; }
.template-sender-search { min-width: 220px; }
.template-sender-library-rows { display: grid; }
.template-sender-template-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 20px; border-bottom: 1px solid var(--line); }
.template-sender-template-row:last-child { border-bottom: 0; }
.template-sender-template-copy { min-width: 0; }
.template-sender-template-copy h3 { margin: 0 0 5px; color: var(--ink); font-size: 16px; }
.template-sender-template-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.template-sender-template-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.template-sender-template-actions .primary-btn,
.template-sender-template-actions .secondary-btn { white-space: nowrap; }
.template-sender-library-empty { display: grid; justify-items: center; gap: 7px; padding: 60px 20px; color: var(--muted); text-align: center; }
.template-sender-library-empty i { width: 24px; color: var(--green); }
.template-sender-library-empty h3, .template-sender-library-empty p { margin: 0; }
.template-sender-library-empty h3 { color: var(--ink); }
.template-sender-drawer-overlay { position: fixed; inset: 0; z-index: 30; display: flex; justify-content: flex-end; }
.template-sender-drawer-backdrop { position: absolute; inset: 0; background: rgba(18, 29, 24, .22); }
.template-sender-drawer { position: relative; display: flex; flex-direction: column; width: min(820px, 100%); height: 100%; border-left: 1px solid var(--line-strong); background: var(--surface, #fff); box-shadow: -1rem 0 2.5rem rgba(18, 29, 24, .16); overflow: hidden; }
.template-sender-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 25px 32px 20px; border-bottom: 1px solid var(--line); }
.template-sender-drawer-header h2 { margin: 4px 0 5px; color: var(--ink); font-size: 22px; }
.template-sender-drawer-body { flex: 1; padding: 22px 32px 30px; overflow: auto; }
.template-sender-drawer .template-sender-form { margin-top: 0; }
.template-sender-method { margin: 0; padding: 0; border: 0; }
.template-sender-method legend { margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 800; }
.template-sender-method-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-subtle, #f5f7f4); }
.template-sender-method-toggle label { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border-radius: 7px; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 800; }
.template-sender-method-toggle label:has(input:checked) { color: var(--green-800); background: var(--surface, #fff); box-shadow: 0 1px 5px rgba(18, 29, 24, .1); }
.template-sender-method-toggle input { accent-color: var(--green); }
.template-sender-drawer .template-sender-form textarea[name="body"], .template-sender-drawer .template-sender-form textarea[name="body_markdown"] { min-height: 180px; }
.template-sender-drawer-review { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.template-sender-drawer-review h3 { margin: 2px 0 0; color: var(--ink); font-size: 18px; }
.template-sender-drawer .template-sender-preview { min-height: 170px; margin: 14px 0; padding: 14px; background: var(--surface-subtle, #f5f7f4); }
.template-sender-drawer .template-sender-send { width: 100%; }
.template-sender-editor-drawer .template-sender-drawer-body { padding-top: 24px; }
@media (max-width: 700px) {
  .template-sender-library-header, .template-sender-template-row { align-items: stretch; flex-direction: column; }
  .template-sender-template-actions { justify-content: flex-start; }
  .template-sender-search { max-width: none; }
  .template-sender-library-header-actions { width: 100%; }
  .template-sender-drawer-header, .template-sender-drawer-body { padding-right: 18px; padding-left: 18px; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3f1e8;
  --text: #dfe8df;
  --muted: #b6c6bc;
  --green-900: #071611;
  --green-800: #1e5a46;
  --green-700: #98c7aa;
  --sage-100: #10251e;
  --sage-200: #17342b;
  --sage-300: #335a4b;
  --gold: #d5b35d;
  --cream: #081612;
  --paper: #0e211b;
  --white: #ffffff;
  --line: rgba(244, 241, 232, 0.14);
  --line-strong: rgba(244, 241, 232, 0.28);
  --sidebar: #071611;
  --sidebar-soft: #17342b;
  --teal: #98c7aa;
  --blue: #8aa6b8;
  --coral: #d69a78;
  --amber: #d5b35d;
  --green: #98c7aa;
  --chart-1: #d5b35d;
  --chart-2: #98c7aa;
  --chart-3: #ff9a76;
  --chart-4: #8aa6b8;
  --chart-5: #c7a5ff;
  --chart-6: #6fd1b8;
  --chart-grid: rgba(244, 241, 232, 0.14);
  --chart-text: #dfe8df;
  --shadow: 0 24px 72px rgba(0, 0, 0, 0.46);
  --soft-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(var(--green-700-rgb), 0.26), transparent 34rem),
    linear-gradient(180deg, rgba(var(--cream-rgb), 0.96), rgba(var(--green-900-rgb), 0.98)),
    var(--cream);
}

html[data-theme="dark"] .logo-light {
  display: none;
}

html[data-theme="dark"] .logo-dark {
  display: block;
}

html[data-theme="dark"] .sidebar {
  background:
    linear-gradient(180deg, rgba(var(--green-900-rgb), 0.98), rgba(var(--green-900-rgb), 0.98)),
    var(--sidebar);
  border-right-color: rgba(var(--gold-rgb), 0.18);
}

html[data-theme="dark"] .mobile-appbar,
html[data-theme="dark"] .filter-drawer {
  background:
    linear-gradient(180deg, rgba(var(--green-900-rgb), 0.98), rgba(var(--green-900-rgb), 0.98)),
    var(--sidebar);
  border-color: rgba(var(--gold-rgb), 0.18);
}

html[data-theme="dark"] .mobile-brand {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line-strong);
}

html[data-theme="dark"] .sidebar-brand {
  color: var(--white);
}

html[data-theme="dark"] .sidebar-user {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 3px 0 0 var(--gold);
}

html[data-theme="dark"] .sidebar-user:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .sidebar-user-avatar {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

html[data-theme="dark"] .sidebar-user-copy strong {
  color: var(--text);
}

html[data-theme="dark"] .sidebar-user-copy span {
  color: var(--muted);
}

html[data-theme="dark"] .profile-identity-avatar {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

html[data-theme="dark"] .sidebar-menu-toggle,
html[data-theme="dark"] .sidebar-logout,
html[data-theme="dark"] .sidebar-theme-toggle {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line-strong);
  color: var(--ink);
}

html[data-theme="dark"] .nav-list button,
html[data-theme="dark"] .sidebar-logout,
html[data-theme="dark"] .sidebar-theme-toggle {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="dark"] .nav-list button:hover,
html[data-theme="dark"] .sidebar-logout:hover,
html[data-theme="dark"] .sidebar-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  box-shadow:
    inset 2px 0 0 rgba(var(--gold-rgb), 0.72),
    0 12px 24px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .nav-list button.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  box-shadow: inset 3px 0 0 var(--gold);
}

html[data-theme="dark"] .login-panel,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .table-panel,
html[data-theme="dark"] .connector-card,
html[data-theme="dark"] .setting-block,
html[data-theme="dark"] .overview-filter-card,
html[data-theme="dark"] .overview-controls-popover,
html[data-theme="dark"] .native-vault-modal,
html[data-theme="dark"] .analytics-tab-nav,
html[data-theme="dark"] .settings-menu,
html[data-theme="dark"] .ai-drawer {
  background: rgba(var(--sage-100-rgb), 0.94);
  border-color: var(--line);
  box-shadow: var(--soft-shadow);
}

html[data-theme="dark"] .hero-panel {
  background:
    linear-gradient(180deg, rgba(var(--sage-100-rgb), 0.96), rgba(var(--paper-rgb), 0.94)),
    var(--paper);
  border-left-color: var(--gold);
}

html[data-theme="dark"] .overview-controls-backdrop {
  background: rgba(3, 10, 8, 0.42);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #091914;
  color: var(--ink);
  border-color: var(--line-strong);
}

html[data-theme="dark"] .analytics-tab {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .analytics-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

html[data-theme="dark"] .analytics-tab.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.24);
}

html[data-theme="dark"] .analytics-view-picker select {
  color-scheme: light;
}

html[data-theme="dark"] .analytics-view-picker select option {
  background: var(--cream);
  color: var(--ink);
}

html[data-theme="dark"] .toolbar input,
html[data-theme="dark"] .toolbar select {
  background-color: rgba(9, 25, 20, 0.92);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 22px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .toolbar input:hover,
html[data-theme="dark"] .toolbar select:hover {
  background-color: rgba(var(--paper-rgb), 0.98);
  border-color: rgba(244, 241, 232, 0.38);
}

html[data-theme="dark"] .toolbar input:focus,
html[data-theme="dark"] .toolbar select:focus {
  border-color: var(--gold);
  box-shadow:
    0 0 0 3px rgba(var(--gold-rgb), 0.18),
    0 12px 26px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .toolbar input[type="date"] {
  color-scheme: dark;
}

html[data-theme="dark"] .toolbar input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background: rgba(var(--gold-rgb), 0.16);
}

html[data-theme="dark"] .toolbar select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f3f1e8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

html[data-theme="dark"] .toolbar select option {
  background: #091914;
  color: var(--ink);
}

html[data-theme="dark"] .native-vault-search {
  background: rgba(var(--paper-rgb), 0.96);
  border-color: rgba(var(--gold-rgb), 0.34);
  color: var(--ink);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] .native-vault-search:focus-within {
  background: var(--paper);
  border-color: rgba(var(--gold-rgb), 0.82);
  box-shadow:
    0 0 0 3px rgba(var(--gold-rgb), 0.22),
    0 16px 34px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .native-vault-search input {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--ink);
  color-scheme: light;
  box-shadow: none !important;
}

html[data-theme="dark"] .native-vault-search input:focus {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .native-vault-search input::placeholder {
  color: rgba(var(--text-rgb), 0.58);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(var(--text-rgb), 0.58);
}

html[data-theme="dark"] .login-form button,
html[data-theme="dark"] .primary-btn,
html[data-theme="dark"] .analysis-button,
html[data-theme="dark"] .icon-button:hover,
html[data-theme="dark"] .admin-tabs button.active {
  background: var(--gold);
  color: var(--green-900);
  border-color: var(--gold);
  box-shadow: 0 12px 26px rgba(var(--gold-rgb), 0.18);
}

html[data-theme="dark"] .secondary-btn,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .admin-tabs button,
html[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line-strong);
  color: var(--ink);
}

html[data-theme="dark"] .admin-tabs button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  box-shadow:
    inset 2px 0 0 rgba(var(--gold-rgb), 0.72),
    0 12px 24px rgba(0, 0, 0, 0.18);
  transform: translateX(2px);
}

html[data-theme="dark"] .analysis-button:hover {
  box-shadow: 0 16px 30px rgba(var(--gold-rgb), 0.24);
  transform: translateY(-1px);
}

html[data-theme="dark"] .ai-drawer-backdrop {
  background: rgba(0, 0, 0, 0.48);
}

html[data-theme="dark"] .mobile-drawer-backdrop,
html[data-theme="dark"] .filter-drawer-backdrop {
  background: rgba(0, 0, 0, 0.52);
}

html[data-theme="dark"] .ai-context-list strong {
  color: var(--ink);
}

html[data-theme="dark"] .theme-toggle-track {
  background: rgba(var(--gold-rgb), 0.18);
}

html[data-theme="dark"] .theme-toggle-track span {
  transform: translateX(18px);
  background: var(--gold);
}

html[data-theme="dark"] .theme-toggle-glyph {
  opacity: 0.52;
}

html[data-theme="dark"] .theme-toggle-glyph:last-child {
  opacity: 1;
}

html[data-theme="dark"] .badge.good {
  background: rgba(var(--green-700-rgb), 0.16);
  color: var(--green-700);
}

html[data-theme="dark"] .badge.warn {
  background: rgba(var(--gold-rgb), 0.18);
  color: var(--gold);
}

html[data-theme="dark"] .badge.info {
  background: rgba(138, 166, 184, 0.16);
  color: var(--blue);
}

html[data-theme="dark"] .setup-score,
html[data-theme="dark"] .setup-note,
html[data-theme="dark"] .connection-help,
html[data-theme="dark"] .metric-toggle,
html[data-theme="dark"] .vault-user-checkbox,
html[data-theme="dark"] code {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .metric-toggle {
  color: var(--ink);
}

html[data-theme="dark"] .advanced-setup {
  background: rgba(255, 255, 255, 0.035);
}

html[data-theme="dark"] .connection-panel {
  background: rgba(255, 255, 255, 0.045);
}

@media (max-width: 520px) {
  .login-body {
    padding: 16px;
  }

  .login-panel {
    padding: 26px 22px;
  }

  .login-brand .brand-logo {
    width: min(320px, 100%);
  }

  .login-panel h1 {
    font-size: 25px;
  }

  .floating-theme-toggle {
    right: 16px;
    bottom: 16px;
  }
}

@media (max-width: 360px) {
  .login-panel {
    padding: 22px 16px;
  }

  .login-panel h1 {
    font-size: 22px;
  }
}

@media (max-width: 1100px) {
  .dashboard-body {
    grid-template-columns: 80px 1fr;
  }

  .dashboard-body.sidebar-collapsed {
    grid-template-columns: 80px 1fr;
  }

  .sidebar,
  .dashboard-body.sidebar-collapsed .sidebar {
    padding-inline: 14px;
  }

  .sidebar-brand .brand-product,
  .nav-list span {
    display: none;
  }

  .sidebar-brand .brand-logo {
    display: none;
  }

  html[data-theme="dark"] .sidebar-brand .brand-logo,
  html[data-theme="dark"] .dashboard-body.sidebar-collapsed .sidebar-brand .brand-logo {
    display: none;
  }

  .sidebar-brand .brand-icon {
    display: block;
  }

  .sidebar-user,
  .dashboard-body.sidebar-collapsed .sidebar-user {
    grid-template-columns: 28px;
    justify-items: start;
    width: calc(100% - 1px);
    min-height: 46px;
    padding: 8px 11px;
    margin-inline: 0;
    border-radius: 8px;
  }

  .sidebar-user-avatar,
  .dashboard-body.sidebar-collapsed .sidebar-user-avatar {
    width: 28px;
    height: 28px;
  }

  .sidebar-user-copy,
  .dashboard-body.sidebar-collapsed .sidebar-user-copy {
    display: none;
  }

  .dashboard-body.sidebar-collapsed .sidebar {
    align-items: center;
  }

  .dashboard-body.sidebar-collapsed .sidebar-top,
  .dashboard-body.sidebar-collapsed .nav-list,
  .dashboard-body.sidebar-collapsed .sidebar-footer {
    width: 44px;
  }

  .dashboard-body.sidebar-collapsed .sidebar-top,
  .dashboard-body.sidebar-collapsed .nav-list {
    justify-items: center;
  }

  .dashboard-body.sidebar-collapsed .sidebar-user,
  .dashboard-body.sidebar-collapsed .nav-list button {
    width: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    justify-content: center;
  }

  .dashboard-body.sidebar-collapsed .sidebar-footer,
  .dashboard-body.sidebar-collapsed .sidebar-utility-stack {
    align-items: center;
  }

  .metric-grid,
  .profile-grid,
  .website-summary-grid,
  .three-grid,
  .coverage-grid,
  .website-support-grid,
  .newsletter-shell,
  .newsletter-preview-grid,
  .link-tree-manager-grid,
  .connector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .overview-dashboard-focus {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  }

  .overview-dashboard-focus-popout {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-dashboard-focus-popout .overview-chart-panel {
    width: 100%;
    min-width: 0;
  }

  .settings-workspace {
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  }

  .settings-menu {
    position: sticky;
  }

  .chart-box.hero {
    height: 360px;
  }

  .leak-bar-cell {
    min-width: 120px;
  }
}

@media (max-width: 920px) {
  .overview-dashboard-focus {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dashboard-body {
    display: block;
    padding-top: 64px;
    overflow-x: hidden;
  }

  .dashboard-body.sidebar-collapsed {
    display: block;
  }

  .dashboard-body.drawer-lock {
    overflow: hidden;
  }

  .mobile-appbar {
    display: grid;
    grid-template-columns: 44px 44px minmax(0, 1fr) auto;
  }

  .mobile-drawer-backdrop,
  .filter-drawer-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    background: rgba(10, 22, 18, 0.34);
  }

  .mobile-drawer-backdrop {
    z-index: 45;
  }

  .filter-drawer-backdrop {
    z-index: 45;
  }

  .mobile-drawer-backdrop[hidden],
  .filter-drawer-backdrop[hidden] {
    display: none;
  }

  .link-tree-manager-grid {
    grid-template-columns: 1fr;
  }

  .link-tree-popout,
  .event-popout {
    width: calc(100vw - 24px);
  }

  .link-tree-edit-drawer,
  .event-popout.event-drawer {
    width: 100vw;
    max-width: 100vw;
  }

  .event-manager-grid,
  .event-slot-row {
    grid-template-columns: 1fr;
  }

  .event-public-card .panel-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .event-public-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "url"
      "actions";
  }

  .event-public-card > .panel-title-row {
    margin-bottom: 10px;
  }

  .event-public-card > .event-card-actions {
    width: 100%;
    margin-top: 12px;
    justify-content: stretch;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .event-public-card > .event-card-actions .event-card-action {
    flex: 1 1 0;
    min-width: 0;
    height: var(--control-h, 44px);
    min-height: var(--control-h, 44px);
    padding-inline: 12px;
    gap: 7px;
    font-size: 13px;
  }

  /* Registrations has the longest label. Borrow an equal share of row width
     from the shorter Dates and Settings controls so its icon never crowds out. */
  .event-public-card > .event-card-actions .event-card-action[data-event-slots-open],
  .event-public-card > .event-card-actions .event-card-action[data-event-settings-open] {
    flex-grow: 0.8;
  }

  .event-public-card > .event-card-actions .event-card-action[data-event-registrations-open] {
    flex-grow: 1.4;
  }

  .event-slot-counts {
    min-width: 0;
    text-align: left;
  }

  .newsletter-shell,
  .newsletter-editor-layout,
  .newsletter-preview-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-list-panel,
  .newsletter-editor-panel,
  .newsletter-preview-panel,
  .newsletter-links-panel,
  .newsletter-quality-panel,
  .newsletter-plain-text-panel {
    padding: 16px;
  }

  .newsletter-home-row,
  .newsletter-home-row-meta {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .newsletter-editor-popover {
    width: 100vw;
  }

  .newsletter-home-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .newsletter-home-actions > * {
    flex: 1 1 150px;
  }

  .newsletter-audience-drawer {
    width: 100vw;
  }

  .newsletter-audience-drawer-header,
  .newsletter-audience-drawer-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .newsletter-audience-summary {
    grid-template-columns: 1fr;
  }

  .newsletter-audience-create-row {
    grid-template-columns: 1fr;
  }

  .newsletter-audience-create-row .status-line {
    min-height: 0;
  }

  .newsletter-people-heading {
    display: grid;
  }

  .newsletter-people-heading input {
    width: 100%;
  }

  .newsletter-score-grid,
  .newsletter-check-list {
    grid-template-columns: 1fr;
  }

  .newsletter-preview-frame-wrap,
  .newsletter-preview-frame {
    min-height: 420px;
  }

  .coverage-grid,
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .test-delta-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .test-delta-row em {
    grid-column: 1 / -1;
    text-align: left;
  }

  .leak-bar-cell {
    min-width: 104px;
    grid-template-columns: minmax(56px, 1fr) auto;
  }

  .test-analytics-hero .panel-title-row {
    display: grid;
  }

  .newsletter-actions > * {
    flex: 1 1 220px;
  }

  .link-tree-public-card,
  .link-tree-links-panel {
    padding: 16px;
  }

  .link-tree-links-panel > .panel-title-row p {
    white-space: normal;
  }

  .link-tree-table-scroll {
    margin: 0 -16px -16px;
    width: calc(100% + 32px);
  }

  .link-tree-top-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .link-tree-url-row {
    align-items: stretch;
  }

  .link-tree-url-row .button-row {
    width: 100%;
  }

  .link-tree-url-row .button-row > * {
    flex: 1 1 0;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 46;
    width: min(360px, calc(100vw - 24px));
    height: 100dvh;
    padding: 18px;
    overflow: auto;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: 26px 0 70px rgba(var(--ink-rgb), 0.22);
  }

  .dashboard-body.mobile-nav-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-top {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sidebar-menu-toggle {
    display: none;
  }

  .dashboard-body.sidebar-collapsed .sidebar {
    padding: 18px;
  }

  .sidebar-brand,
  .dashboard-body.sidebar-collapsed .sidebar-brand {
    display: grid;
    justify-items: start;
    margin: 0;
    width: auto;
  }

  .sidebar-brand .brand-logo {
    display: block;
    width: min(218px, 100%);
  }

  .dashboard-body.sidebar-collapsed .sidebar-brand .brand-logo {
    display: block;
  }

  /* The mobile sheet keeps the logo at its desktop size, but never renders
     both theme variants at once. */
  html:not([data-theme="dark"]) .sidebar-brand .logo-dark,
  html:not([data-theme="dark"]) .dashboard-body.sidebar-collapsed .sidebar-brand .logo-dark {
    display: none;
  }

  .sidebar-brand .brand-icon,
  .dashboard-body.sidebar-collapsed .sidebar-brand .brand-icon {
    display: none;
  }

  html[data-theme="dark"] .sidebar-brand .logo-light,
  html[data-theme="dark"] .dashboard-body.sidebar-collapsed .sidebar-brand .logo-light {
    display: none;
  }

  html[data-theme="dark"] .sidebar-brand .logo-dark,
  html[data-theme="dark"] .dashboard-body.sidebar-collapsed .sidebar-brand .logo-dark {
    display: block;
  }

  .sidebar-brand .brand-product {
    display: block;
  }

  .sidebar-user,
  .dashboard-body.sidebar-collapsed .sidebar-user {
    width: auto;
    grid-template-columns: 44px minmax(0, 1fr);
    justify-items: stretch;
    margin-inline: 0;
    padding: 10px 12px;
  }

  .sidebar-user-copy,
  .dashboard-body.sidebar-collapsed .sidebar-user-copy {
    display: grid;
  }

  .nav-list {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .nav-list button {
    min-height: 48px;
    font-size: 15px;
  }

  .nav-list span,
  .dashboard-body.sidebar-collapsed .nav-list span {
    display: inline;
  }

  .dashboard-body.sidebar-collapsed .nav-list button {
    justify-content: flex-start;
  }

  .sidebar-footer,
  .dashboard-body.sidebar-collapsed .sidebar-footer {
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
  }

  .sidebar-footer .sidebar-user,
  .dashboard-body.sidebar-collapsed .sidebar-footer .sidebar-user {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }

  .sidebar-footer .sidebar-utility-stack,
  .dashboard-body.sidebar-collapsed .sidebar-footer .sidebar-utility-stack {
    order: 2;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    align-self: center;
  }

  .app-main {
    padding: 16px;
  }

  .topbar > div:first-child {
    display: none;
  }

  .topbar {
    gap: 12px;
    margin-bottom: 12px;
  }

  .toolbar {
    display: grid;
    align-items: stretch;
    gap: 10px;
    justify-content: stretch;
    justify-self: stretch;
    width: 100%;
  }

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

  .toolbar label,
  .toolbar label.wide-filter {
    width: 100%;
    min-width: 0;
  }

  .analytics-tab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .analytics-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .dashboard-body.analytics-view .topbar-heading-row {
    width: auto;
    justify-content: start;
  }

  .analytics-view-picker {
    display: none !important;
  }

  .filter-drawer {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 46;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: min(84dvh, 640px);
    width: auto;
    transform: translateY(105%);
    transition: transform 0.2s ease;
    opacity: 1;
    pointer-events: auto;
  }

  .filter-drawer-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: min(84dvh, 640px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -24px 70px rgba(var(--ink-rgb), 0.2);
    overflow: hidden;
  }

  .overview-controls-backdrop,
  .overview-controls-popover,
  .overview-controls-trigger {
    display: none;
  }

  .tracking-link-builder-popover {
    top: auto;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: min(88dvh, 860px);
    border-radius: 18px 18px 0 0;
    transform: translateY(24px);
  }

  .dashboard-body.tracking-link-builder-open .tracking-link-builder-popover {
    transform: translateY(0);
  }

  .tracking-link-builder-popover-header {
    padding: 16px;
  }

  .tracking-link-builder-popover-body {
    padding: 16px;
  }

  .dashboard-body.filter-drawer-open .filter-drawer {
    transform: translateY(0);
  }

  .filter-drawer-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--line);
  }

  .filter-drawer-header h2 {
    margin: 0;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.1;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
  }

  .filter-drawer-content {
    display: grid;
    gap: 10px;
    padding: 16px;
    overflow: auto;
  }

  .filter-fields {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    padding: 0;
  }

  .toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px 44px;
    gap: 8px;
  }

  /* Full width on its own row: the grid above has four fixed tracks, so a
     fifth control would otherwise be squeezed into a 44px column. */
  .toolbar-actions > #dateRangeControl {
    grid-column: 1 / -1;
  }

  .toolbar-actions .daterange,
  .toolbar-actions .daterange-trigger {
    width: 100%;
    justify-content: center;
  }

  .analysis-button {
    width: 100%;
    min-width: 0;
    padding-inline: 12px;
  }

  .analysis-button span {
    display: inline;
  }

  .panel-title-row {
    display: grid;
  }

  .setup-hero {
    display: grid;
    align-items: start;
  }

  .setup-score {
    width: 100%;
  }

  .settings-workspace {
    grid-template-columns: 1fr;
  }

  .password-vault-grid {
    grid-template-columns: 1fr;
  }

  .native-vault-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .native-vault-list {
    border-right: 0;
    padding-right: 0;
  }

  .native-vault-fields > div,
  .native-vault-fields > div.wide {
    grid-template-columns: 1fr auto auto;
  }

  .native-vault-fields > div > .native-vault-copy { grid-column: 3; }
  .native-vault-fields > div > .native-vault-reveal { grid-column: 2; }

  .native-vault-fields span {
    grid-column: 1 / -1;
  }

  .settings-menu {
    position: static;
  }

  .settings-menu .admin-tabs {
    grid-template-columns: 1fr;
  }

  .setting-block-head {
    display: grid;
  }

  .setting-block-head .primary-btn {
    justify-self: start;
    margin-top: 0;
  }

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

  .panel-grid,
  .profile-grid,
  .website-summary-grid,
  .three-grid,
  .website-support-grid,
  .overview-dashboard-focus,
  .overview-dashboard-focus-popout,
  .overview-support,
  .insight-action-list {
    grid-template-columns: 1fr;
  }

  .overview-filter-card {
    padding: 14px;
  }

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

  .panel,
  .table-panel,
  .setting-block {
    padding: 14px;
  }

  .hero-panel {
    padding: 16px;
  }

  .passkey-panel-header,
  .passkey-row {
    flex-direction: column;
    align-items: stretch;
  }

  .chart-box {
    height: 300px;
  }

  .chart-box.compact {
    height: 250px;
  }

  .chart-box.hero {
    height: 340px;
  }

  .funnel-row {
    grid-template-columns: 96px 1fr 64px;
  }

  .table-scroll {
    margin-inline: -2px;
    padding-bottom: 4px;
  }

  th,
  td {
    white-space: nowrap;
  }

  .ai-drawer {
    inset: 0;
    width: 100vw;
    border-left: 0;
  }

  .ai-drawer-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--paper);
  }
}

@media (max-width: 430px) {
  .mobile-appbar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .mobile-brand {
    display: none;
  }

  .mobile-actions {
    gap: 5px;
  }

  .app-main {
    padding: 14px 12px;
  }

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

  .profile-grid,
  .website-summary-grid,
  .newsletter-shell,
  .newsletter-preview-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-list-panel,
  .newsletter-editor-panel,
  .newsletter-preview-panel,
  .newsletter-links-panel {
    padding: 14px;
  }

  .newsletter-preview-frame-wrap,
  .newsletter-preview-frame {
    min-height: 340px;
  }

  .newsletter-actions > * {
    width: 100%;
    flex: 1 1 100%;
  }

  .chart-box.hero {
    height: 310px;
  }

  .funnel-row {
    grid-template-columns: 1fr;
  }
}

/* Tracking link row actions + edit/delete modals */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tracking-links-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0 14px;
}
.tracking-links-panel-head h2 { margin: 0 0 4px; }
/* Air between the description and the first header row. */
.tracking-links-panel-head + .table-scroll { padding-top: 6px; }
.tracking-links-panel-head p { margin: 0; color: var(--muted); font-size: 13px; }
.tracking-folder-toolbar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.tracking-folder-status { min-width: 90px; text-align: right; }
.tracking-folder-add { min-height: 38px; padding: 0 13px; white-space: nowrap; }
.tracking-folder-add i,
.tracking-folder-add [data-lucide] { width: 17px; height: 17px; }
.links-drag-col,
.links-drag-cell { width: 38px; min-width: 38px; padding-left: 8px !important; padding-right: 4px !important; }
.links-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  /* Keep the reorder grip visually aligned with the name content. */
  transform: translateX(6px);
  color: var(--muted);
  cursor: grab;
  border-radius: 6px;
}
.links-drag-handle:hover { color: var(--green-800); background: rgba(var(--green-700-rgb), 0.08); }
.links-drag-handle:active { cursor: grabbing; }
.links-drag-handle i,
.links-drag-handle [data-lucide] { width: 17px; height: 17px; }
.tracking-folder-row td {
  padding: 0 !important;
  background: rgba(var(--green-700-rgb), 0.075);
  border-top: 2px solid rgba(var(--green-700-rgb), 0.17);
  border-bottom: 1px solid rgba(var(--green-700-rgb), 0.14);
}
.tracking-folder-row[draggable="true"] { cursor: grab; }
.tracking-folder-row[draggable="true"]:active { cursor: grabbing; }
.tracking-folder-bar {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: var(--green-900);
}
.tracking-folder-icon { width: 17px; height: 17px; color: var(--green-700); }
.tracking-folder-count {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.tracking-folder-note { margin-left: auto; color: var(--muted); font-size: 12px; }
.tracking-folder-actions {
  position: sticky;
  right: 8px;
  z-index: 2;
  margin-left: auto;
  padding: 3px 4px 3px 10px;
  display: inline-flex;
  gap: 6px;
  border-radius: 9px;
  background: var(--sage-100);
  box-shadow: -10px 0 16px var(--sage-100);
}
.folder-action-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--green-900);
  cursor: pointer;
}
.folder-action-btn:hover { border-color: var(--line-strong); background: #fff; }
.folder-action-btn i,
.folder-action-btn [data-lucide] { width: 15px; height: 15px; }
.folder-delete-btn:hover { border-color: #c0392b; color: #c0392b; background: rgba(192, 57, 43, 0.08); }
.tracking-folder-unfiled td { background: rgba(var(--ink-rgb), 0.035); }
.tracking-folder-unfiled .tracking-folder-handle { cursor: default; }
.tracking-folder-row.is-collapsed td { border-bottom-color: var(--line-strong); }
.folder-collapse-btn { flex: 0 0 auto; }
.tracking-link-row { transition: opacity 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease; }
.tracking-link-row:hover { background: rgba(var(--green-700-rgb), 0.035); }
#linksTable .is-dragging { opacity: 0.38; }
#linksTable .drop-before { box-shadow: inset 0 3px 0 var(--green-700); }
#linksTable .drop-after { box-shadow: inset 0 -3px 0 var(--green-700); }
#linksTable .drop-inside td { background: rgba(var(--green-700-rgb), 0.16); }
.lt-folder-modal { width: min(440px, calc(100vw - 32px)); }
.lt-folder-modal label { display: grid; gap: 7px; font-weight: 750; }

.links-actions-col,
.links-actions-cell {
  width: 124px;
  min-width: 124px;
  padding-right: 10px !important;
  text-align: right;
  white-space: nowrap;
}
.link-action-btn {
  background: transparent;
  border: 1px solid var(--border, #d0d7e2);
  border-radius: 6px;
  padding: 4px 7px;
  margin-left: 6px;
  cursor: pointer;
  color: inherit;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.links-actions-cell .link-action-btn {
  width: 30px;
  height: 30px;
  justify-content: center;
  padding: 0;
}
.links-actions-cell .link-action-btn:first-child { margin-left: 0; }
.link-action-btn:hover { background: rgba(13, 34, 56, 0.06); }
.link-action-btn i,
.link-action-btn [data-lucide] { width: 16px; height: 16px; }
.link-delete-btn:hover { border-color: #c0392b; color: #c0392b; background: rgba(192, 57, 43, 0.08); }

@media (max-width: 720px) {
  .tracking-links-panel-head { align-items: stretch; flex-direction: column; }
  .tracking-folder-toolbar { justify-content: space-between; }
  .tracking-folder-status { text-align: left; }
  .tracking-folder-note { display: none; }
}

#ltModalRoot { position: fixed; inset: 0; z-index: 1000; }
.lt-modal-backdrop { position: fixed; inset: 0; background: rgba(6, 17, 29, 0.55); }
.lt-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--panel, #ffffff);
  color: var(--text, #0d2238);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(6, 17, 29, 0.35);
}
.lt-modal.lt-confirm { width: min(520px, calc(100vw - 32px)); }
.lt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border, #e5e9f0);
}
.lt-modal-header h2 { margin: 0; font-size: 18px; }
.lt-modal.lt-folder-modal { position: fixed; inset: 0 0 0 auto; width: min(520px, 100vw); max-width: 100vw; height: 100dvh; max-height: none; transform: none; border-radius: 0; overflow-y: auto; }
.lt-modal.lt-folder-modal + * { display: none; }
@media (max-width: 720px) {
  .lt-modal.lt-folder-modal { inset: auto 0 0; width: 100%; height: min(88dvh, 760px); border-radius: 18px 18px 0 0; }
}
.lt-modal-close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: inherit; }
.lt-modal-body { padding: 20px 22px; }
.lt-modal-note { color: var(--muted, #6b7a90); font-size: 13px; margin: 4px 0 0; }
.lt-modal-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.lt-confirm-points { margin: 10px 0; padding-left: 20px; }
.lt-confirm-points li { margin: 4px 0; }
.lt-danger-btn {
  background: #c0392b;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-weight: 600;
  cursor: pointer;
}
.lt-danger-btn:hover { background: #a83224; }

/* AI Visibility */
.panel-note {
  margin: 0 0 12px;
  color: var(--text-muted, var(--green-700));
  font-size: 13px;
  line-height: 1.45;
}

.ai-usage-summary { display: grid; gap: 16px; }
.ai-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.ai-usage-grid > div { border: 1px solid var(--border-color, #d8e4dc); border-radius: 10px; padding: 12px; }
.ai-usage-grid span { display: block; color: var(--text-muted, var(--green-700)); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.ai-usage-grid strong { display: block; margin-top: 4px; font-size: 20px; }
.ai-usage-table-wrap { overflow-x: auto; }
.ai-usage-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ai-usage-table-wrap th, .ai-usage-table-wrap td { padding: 10px 8px; border-bottom: 1px solid var(--border-color, #d8e4dc); text-align: left; white-space: nowrap; }
.ai-usage-table-wrap th { color: var(--text-muted, var(--green-700)); font-size: 12px; text-transform: uppercase; }
.ai-usage-empty { margin: 0; }
@media (max-width: 720px) { .ai-usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* QR download menu */
.qr-menu {
  position: fixed;
  z-index: 240;
  min-width: 220px;
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border-color, #d8e4dc);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(var(--green-900-rgb), 0.18);
  padding: 8px;
}
.qr-menu-title {
  margin: 4px 8px 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, var(--green-700));
}
.qr-menu-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: inherit;
  text-decoration: none;
}
.qr-menu-item:hover {
  background: rgba(var(--green-800-rgb), 0.1);
}

/* Reviews */
.notice-panel {
  border-left: 4px solid var(--gold);
  margin-bottom: 16px;
}
.notice-panel .panel-note {
  margin: 0;
}

/* Goals & action scoring */
.goal-list {
  display: grid;
  gap: 14px;
}
.goal-row {
  border: 1px solid var(--border-color, #d8e4dc);
  border-radius: 12px;
  padding: 12px 16px;
}
.goal-row-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.goal-status {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, var(--green-700));
}
.goal-achieved .goal-status { color: #1e7d4f; }
.goal-on-track .goal-status { color: #1e7d4f; }
.goal-behind .goal-status { color: #b0532e; }
.goal-progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--green-800-rgb), 0.12);
  margin: 10px 0 6px;
  overflow: hidden;
}
.goal-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--green-800);
}
.goal-behind .goal-progress-fill { background: #b0532e; }
.goal-row-meta {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, var(--green-700));
}
.action-scores-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Alerts */
.alert-list {
  display: grid;
  gap: 12px;
}
.alert-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--border-color, #d8e4dc);
  border-left-width: 4px;
  border-radius: 12px;
  padding: 12px 16px;
}
.alert-row.alert-critical { border-left-color: #b0532e; }
.alert-row.alert-warning { border-left-color: var(--gold); }
.alert-row.alert-info { border-left-color: #5f7f96; }
.alert-row-main {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.alert-severity {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, var(--green-700));
  padding-top: 3px;
}
.alert-detail {
  margin: 4px 0 2px;
  font-size: 13px;
  color: var(--text-muted, var(--green-700));
}
.alert-when {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted, var(--green-700));
}

/* AEO checklist */
.aeo-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px 20px;
}
.aeo-checklist li {
  font-size: 14px;
  padding: 6px 0;
}
.aeo-checklist li span {
  display: inline-block;
  width: 20px;
  font-weight: 800;
}
.aeo-checklist li em {
  display: block;
  margin-left: 20px;
  font-size: 12px;
  font-style: normal;
  color: var(--text-muted, var(--green-700));
}
.aeo-pass span { color: #1e7d4f; }
.aeo-fail span { color: #b0532e; }
.aeo-fail { font-weight: 600; }

/* ---- Newsletter audience lists ---- */
.nl-subhead {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
}
.nl-lists-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nl-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sage-100);
}
.nl-list-row-muted { background: transparent; }
.nl-list-name { font-weight: 600; flex: 0 0 auto; min-width: 120px; }
.nl-list-actions { margin-left: auto; display: flex; gap: 12px; }
.nl-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--green-900);
  text-decoration: underline;
}
.nl-linkbtn.nl-danger { color: #b0532e; }
.nl-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--sage-100);
  font-size: 14px;
}
.nl-subs-table-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.nl-subs-table th {
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 1;
}
.nl-subs-table td, .nl-subs-table th { padding: 8px 10px; }

/* ---- Send targeting modal ---- */
.nl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 24, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.nl-modal-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  width: 100%;
  max-width: 440px;
  max-height: 85vh;
  overflow: auto;
  box-shadow: 0 18px 48px rgba(15, 30, 24, 0.28);
}
.nl-modal-list {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0 0 6px;
  cursor: pointer;
}
.nl-modal-all { background: var(--sage-100); }
.nl-modal-list-name { flex: 1 1 auto; }
.nl-modal-lists { margin-top: 4px; }
.nl-modal-disabled { opacity: 0.45; pointer-events: none; }
.nl-modal-count {
  margin-top: 12px;
  font-size: 15px;
}

/* Setup Guide. Moved here with the renderer it styles, so the feature is
   self-contained on the platform instead of living in one client's fork.
   Uses the shared tokens, so it themes with whichever brand loads it. */
.setup-step-grid,
.setup-help-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.setup-step-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}
.setup-step-number {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--green-800);
  color: var(--white);
  font-weight: 850;
}
.setup-step-card h3 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 18px;
}
.setup-step-card p,
.connector-purpose,
.connection-help p,
.privacy-note,
.field-help,
.setup-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}
.setup-status-list {
  display: grid;
  gap: 10px;
}
.setup-status-list p {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.setup-status-list p:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.setup-status-list strong {
  color: var(--ink);
}
.setup-status-list span {
  color: var(--muted);
}
body.dashboard-body .setup-step-card {
  border-radius: 18px;
  background: rgba(241, 247, 247, 0.92);
  border: 1px solid rgba(16, 42, 53, 0.08);
}
body.dashboard-body .setup-step-number {
  background: linear-gradient(180deg, rgba(15, 45, 54, 0.96), rgba(23, 60, 69, 0.96));
}

/* ==========================================================================
   Eligibility UI
   Ported from Baek's retired portal stylesheet (commits c23d4b8, cd5dfc9,
   488b126, 3f88c56), which the Aug 4 platform port left behind.
   Every rule is scoped to body.eligibility-view so no other view or tenant
   is affected, and Baek's design tokens are mapped onto platform ones
   so the drawers follow each tenant brand-theme.css.
   ========================================================================== */
body.eligibility-view a:focus-visible,
body.eligibility-view button:focus-visible,
body.eligibility-view input:focus-visible,
body.eligibility-view select:focus-visible,
body.eligibility-view textarea:focus-visible,
body.eligibility-view summary:focus-visible,
body.eligibility-view [tabindex]:focus-visible {
  box-shadow: 0 0 0 2px var(--sage-100), 0 0 0 4px color-mix(in srgb, var(--green-800) 38%, transparent);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
body.eligibility-view .portal-sidebar-footer .button {
  width: 100%;
}
body.eligibility-view .mobile-nav-button {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: none;
  font-size: 0.8125rem;
  font-weight: 800;
  min-height: 38px;
  padding: 8px 10px;
}
body.eligibility-view .page-header,
body.eligibility-view .panel,
body.eligibility-view .dense-list {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}
body.eligibility-view .page-header,
body.eligibility-view .panel {
  padding: 18px;
}
body.eligibility-view .page-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}
body.eligibility-view .auth-card .stack-form {
  margin-top: 0;
}
body.eligibility-view .auth-card button.auth-provider {
  justify-content: center;
  text-align: center;
}
body.eligibility-view .auth-panel button.auth-provider {
  justify-content: center;
  text-align: center;
}
body.eligibility-view .auth-reset-button {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 8px;
  text-decoration: none;
  width: 100%;
}
body.eligibility-view .metric-strip {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 16px;
}
body.eligibility-view .metric-strip article {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
  display: grid;
  gap: 2px;
  padding: 12px;
}
body.eligibility-view .metric-strip article.attention {
  background: color-mix(in srgb, var(--amber) 14%, var(--white));
  border-color: var(--amber);
}
body.eligibility-view .metric-strip article.danger {
  background: color-mix(in srgb, var(--coral) 12%, var(--white));
  border-color: var(--coral);
}
body.eligibility-view .metric-strip article.success {
  background: var(--sage-100);
  border-color: var(--green-700);
}
body.eligibility-view .metric-strip strong {
  font-size: 1.25rem;
  line-height: 1;
}
body.eligibility-view .metric-strip span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}
body.eligibility-view .newest-lead-row:hover,
body.eligibility-view .newest-lead-row:focus,
body.eligibility-view .table-lead-link:hover,
body.eligibility-view .table-lead-link:focus {
  border-color: var(--line-strong);
  color: var(--text);
  outline: 2px solid var(--sage-100);
}
body.eligibility-view .table-lead-link {
  color: var(--text);
  text-decoration: none;
}
body.eligibility-view .crm-task-table .task-status-chip,
body.eligibility-view .crm-task-table .task-priority-chip {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-width: 78px;
  text-align: center;
}
body.eligibility-view .crm-type-chips .status-chip {
  text-decoration: none;
}
body.eligibility-view .crm-type-chips .status-chip.is-active {
  background: var(--sage-100);
  border-color: var(--green-800);
  color: var(--text);
}
body.eligibility-view .table-panel-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-width: 1060px;
  padding: 12px 10px;
}
body.eligibility-view .table-panel-header h2 {
  font-size: 1rem;
  margin: 0;
}
body.eligibility-view .table-panel-header p {
  color: var(--muted);
  font-size: 0.8125rem;
  margin: 2px 0 0;
}
body.eligibility-view .lead-drawer {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 160ms ease;
  visibility: hidden;
  z-index: 80;
}
body.eligibility-view .lead-drawer:target {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
body.eligibility-view .lead-drawer.is-forced-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
body.eligibility-view .lead-drawer-scrim {
  background: rgba(17, 17, 17, 0.38);
  display: block;
  inset: 0;
  position: absolute;
}
body.eligibility-view .lead-drawer-panel {
  background: var(--white);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  margin-left: auto;
  max-width: 92vw;
  overflow: hidden;
  position: relative;
  transform: translateX(100%);
  transition: transform 190ms ease;
  width: min(920px, 68vw);
}
body.eligibility-view .lead-filter-drawer .lead-drawer-panel {
  width: min(760px, 72vw);
}
body.eligibility-view .lead-drawer:target .lead-drawer-panel {
  transform: translateX(0);
}
body.eligibility-view .lead-drawer.is-forced-open .lead-drawer-panel {
  transform: translateX(0);
}
body.eligibility-view .lead-drawer.drawer-left .lead-drawer-panel {
  border-left: 0;
  border-right: 1px solid var(--line);
  margin-left: 0;
  margin-right: auto;
  transform: translateX(-100%);
  width: min(860px, 72vw);
}
body.eligibility-view .lead-drawer.drawer-left:target .lead-drawer-panel,
body.eligibility-view .lead-drawer.drawer-left.is-forced-open .lead-drawer-panel {
  transform: translateX(0);
}
body.eligibility-view .lead-drawer-header {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}
body.eligibility-view .lead-drawer-header h2 {
  margin: 0;
}
body.eligibility-view .lead-drawer-name {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
}
body.eligibility-view .lead-drawer-header p {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 4px 0 0;
}
body.eligibility-view .lead-drawer-form {
  align-content: start;
  overflow-y: auto;
  padding: 18px 20px 22px;
}
body.eligibility-view .lead-drawer-body {
  overflow-y: auto;
}
body.eligibility-view .lead-drawer-body .lead-drawer-form {
  overflow: visible;
}
body.eligibility-view .lead-drawer-form.compact-grid.crm-intake-grid {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}
body.eligibility-view .inline-alert {
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.875rem;
  padding: 10px 12px;
}
body.eligibility-view .inline-alert.error {
  background: color-mix(in srgb, var(--coral) 10%, white);
  border-color: color-mix(in srgb, var(--coral) 40%, var(--line));
  color: var(--text);
}
body.eligibility-view .lead-drawer-summary {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  padding: 16px 20px 0;
}
body.eligibility-view .lead-drawer-summary div {
  border-right: 1px solid var(--line);
  display: grid;
  gap: 3px;
  padding: 0 12px;
}
body.eligibility-view .lead-drawer-summary div:first-child {
  padding-left: 0;
}
body.eligibility-view .lead-drawer-summary div:last-child {
  border-right: 0;
  padding-right: 0;
}
body.eligibility-view .lead-drawer-summary span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}
body.eligibility-view .lead-drawer-summary strong {
  font-size: 0.875rem;
}
body.eligibility-view .lead-drawer-history {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}
body.eligibility-view .lead-detail-save-row .button {
  min-width: 160px;
}
body.eligibility-view .quick-action-card .button {
  width: 100%;
}
body.eligibility-view .session-mini-table .button {
  min-height: 30px;
  padding: 5px 8px;
}
body.eligibility-view .checkbox-line {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  font-weight: 800;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
}
body.eligibility-view .stack-form label.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.eligibility-view .checkbox-line input {
  width: auto;
}
body.eligibility-view .button-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
body.eligibility-view .button.is-active,
body.eligibility-view .schedule-view-tabs .is-active {
  background: var(--sage-100);
  border-color: var(--green-800);
  color: var(--text);
}
body.eligibility-view .page-header.chart-header {
  flex-wrap: wrap;
}
body.eligibility-view .page-header .full-span {
  flex-basis: 100%;
}
body.eligibility-view .stack-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
body.eligibility-view .stack-form label {
  color: var(--muted);
  display: grid;
  font-size: 0.875rem;
  font-weight: 700;
  gap: 6px;
}
body.eligibility-view .button {
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  min-height: 40px;
  padding: 8px 12px;
}
body.eligibility-view .button.primary {
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--white);
}
body.eligibility-view .button.secondary {
  background: var(--cream);
  color: var(--muted);
}
body.eligibility-view .button.ghost {
  background: transparent;
  color: var(--muted);
}
body.eligibility-view .button:focus,
body.eligibility-view .button:hover {
  border-color: var(--line-strong);
  outline: 2px solid var(--sage-100);
}
body.eligibility-view .status-chip {
  background: var(--sage-100);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  margin: 1px 2px 1px 0;
  padding: 2px 6px;
}
body.eligibility-view .cell-subtle {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  margin-top: 2px;
}
body.eligibility-view .inline-status-form .button {
  min-height: 36px;
  padding: 6px 10px;
}
body.eligibility-view .table-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
  margin-top: 16px;
  overflow-x: auto;
}
body.eligibility-view .ops-table-panel table {
  min-width: 760px;
}
body.eligibility-view .crm-table-panel table {
  min-width: 1060px;
}
body.eligibility-view .empty-state {
  display: grid;
  gap: 3px;
  padding: 18px;
}
body.eligibility-view .empty-state span {
  color: var(--muted);
  font-size: 0.875rem;
}
body.eligibility-view .page-header,
body.eligibility-view .panel,
body.eligibility-view .dense-list,
body.eligibility-view .table-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.eligibility-view .page-header {
  border-bottom: 1px solid var(--line);
  padding: 12px 0 16px;
}
body.eligibility-view .metric-strip {
  background: color-mix(in srgb, var(--cream) 68%, transparent);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  gap: 0;
}
body.eligibility-view .metric-strip article {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--line);
  box-shadow: none;
  min-height: 68px;
  padding: 12px 14px;
}
body.eligibility-view .metric-strip article:last-child {
  border-right: 0;
}
body.eligibility-view .metric-strip article.attention,
body.eligibility-view .metric-strip article.danger,
body.eligibility-view .metric-strip article.success {
  background: transparent;
}
body.eligibility-view .metric-strip article.attention {
  box-shadow: inset 0 3px 0 var(--amber);
}
body.eligibility-view .metric-strip article.danger {
  box-shadow: inset 0 3px 0 var(--coral);
}
body.eligibility-view .metric-strip article.success {
  box-shadow: inset 0 3px 0 var(--green-700);
}
body.eligibility-view .table-panel {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
body.eligibility-view .button {
  border-radius: 6px;
  min-height: 36px;
}
body.eligibility-view .button.secondary,
body.eligibility-view .button.ghost {
  background: transparent;
}
body.eligibility-view .button.primary {
  color: var(--white);
}
body.eligibility-view .status-chip {
  border-radius: 3px;
  padding: 2px 5px;
}
body.eligibility-view .crm-due-card .status-chip {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  min-height: 24px;
  width: 190px;
}
body.eligibility-view .crm-table-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
  margin-top: 24px;
  overflow: hidden;
  padding: 16px;
}
body.eligibility-view .crm-table-panel .panel-header {
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 12px;
  min-width: 0;
}
body.eligibility-view .crm-table-panel .crm-table-wrap {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;
  padding: 2px;
}
body.eligibility-view .crm-inline-search .icon-button {
  flex: 0 0 auto;
}
body.eligibility-view .form-actions .lead-delete-button {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  margin-right: auto;
}
body.eligibility-view .form-actions .lead-delete-button:focus,
body.eligibility-view .form-actions .lead-delete-button:hover {
  background: color-mix(in srgb, var(--coral) 88%, #000);
  border-color: color-mix(in srgb, var(--coral) 88%, #000);
  color: #fff;
}
body.eligibility-view .crm-table-panel table {
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}
body.eligibility-view .crm-table-panel th,
body.eligibility-view .crm-table-panel td {
  min-width: 0;
  overflow-wrap: anywhere;
  vertical-align: middle;
  white-space: normal;
}
body.eligibility-view .crm-table-panel th {
  text-align: center;
}
body.eligibility-view .crm-table-panel th:nth-child(1),
body.eligibility-view .crm-table-panel td:nth-child(1) {
  text-align: left;
  width: 22%;
}
body.eligibility-view .crm-table-panel th:nth-child(2),
body.eligibility-view .crm-table-panel td:nth-child(2) {
  text-align: left;
  width: 22%;
}
body.eligibility-view .crm-table-panel th:nth-child(3),
body.eligibility-view .crm-table-panel td:nth-child(3) {
  text-align: center;
  width: 14%;
}
body.eligibility-view .crm-table-panel th:nth-child(4),
body.eligibility-view .crm-table-panel td:nth-child(4) {
  text-align: center;
  width: 13%;
}
body.eligibility-view .crm-table-panel th:nth-child(5),
body.eligibility-view .crm-table-panel td:nth-child(5) {
  text-align: center;
  width: 15%;
}
body.eligibility-view .crm-table-panel th:nth-child(6),
body.eligibility-view .crm-table-panel td:nth-child(6) {
  text-align: center;
  width: 14%;
}
body.eligibility-view .crm-table-panel tbody tr[data-drawer] {
  cursor: pointer;
}
body.eligibility-view .crm-table-panel tbody tr[data-drawer]:hover {
  background: color-mix(in srgb, var(--green-800) 6%, var(--cream));
}
body.eligibility-view .crm-table-panel .button {
  max-width: 100%;
}
body.eligibility-view .crm-table-panel .status-chip,
body.eligibility-view .crm-table-panel .conversion-dots span {
  box-sizing: border-box;
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
}
body.eligibility-view .crm-table-panel .lead-outcome-cell .status-chip {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  width: 132px;
  max-width: 100%;
  min-height: 24px;
  overflow: hidden;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}
body.eligibility-view .project-page-header {
  align-items: stretch;
  flex-direction: column;
  flex-shrink: 0;
  gap: 4px;
}
body.eligibility-view .project-page-header-main {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
  width: 100%;
}
body.eligibility-view .project-page-header-main > h1 {
  flex: 1 1 auto;
  min-width: 0;
}
body.eligibility-view .button.icon-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-width: 40px;
  padding: 8px 10px;
  text-decoration: none;
}
body.eligibility-view .button.icon-button .portal-icon {
  height: 18px;
  width: 18px;
}
body.eligibility-view .project-task-complete-button {
  align-items: center;
  background: color-mix(in srgb, var(--white) 86%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  height: 22px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  transition:
    background-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 140ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 22px;
  z-index: 4;
}
body.eligibility-view .project-task-complete-button .portal-icon {
  height: 14px;
  width: 14px;
}
body.eligibility-view .project-task-complete-button:hover,
body.eligibility-view .project-task-complete-button:focus-visible {
  background: color-mix(in srgb, var(--green-700) 18%, var(--white));
  border-color: color-mix(in srgb, var(--green-700) 48%, var(--line));
  color: var(--green-700);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-700) 16%, transparent);
  outline: none;
}
body.eligibility-view .project-task-complete-button.is-checked {
  background: var(--green-700);
  border-color: var(--green-700);
  color: var(--cream);
}
body.eligibility-view .project-task-complete-button.is-checked:hover,
body.eligibility-view .project-task-complete-button.is-checked:focus-visible {
  background: color-mix(in srgb, var(--white) 86%, transparent);
  border-color: color-mix(in srgb, var(--green-700) 48%, var(--line));
  color: var(--green-700);
}
body.eligibility-view .project-column-edit-actions .button,
body.eligibility-view .project-column-edit > form > .button,
body.eligibility-view .project-column-edit > form > button {
  width: 100%;
}
body.eligibility-view .project-column-delete-button {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  width: 100%;
}
body.eligibility-view .project-column-delete-button:focus,
body.eligibility-view .project-column-delete-button:hover {
  background: color-mix(in srgb, var(--coral) 88%, #000);
  border-color: color-mix(in srgb, var(--coral) 88%, #000);
  color: #fff;
}
body.eligibility-view .project-drawer .lead-drawer-panel {
  max-width: min(760px, 92vw);
  width: min(760px, 92vw);
}
body.eligibility-view .project-drawer .lead-drawer-form {
  align-content: start;
}
body.eligibility-view .project-drawer-compact .lead-drawer-panel {
  max-width: 92vw;
  width: min(calc(18rem + 40px), 92vw);
}
body.eligibility-view .project-drawer-compact .lead-drawer-header {
  padding-left: 20px;
  padding-right: 20px;
}
body.eligibility-view .project-drawer-compact .lead-drawer-header > div {
  max-width: none;
  min-width: 0;
}
body.eligibility-view .patient-registry-search .stack-form {
  align-items: end;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
}
body.eligibility-view .patient-registry-table table,
body.eligibility-view .task-table-panel table {
  min-width: 860px;
}
body.eligibility-view .table-panel thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
body.eligibility-view .button,
body.eligibility-view .portal-nav a,
body.eligibility-view .queue-item,
body.eligibility-view .action-card,
body.eligibility-view .patient-flow-card,
body.eligibility-view .dense-mini-list a,
body.eligibility-view .newest-lead-row {
  transition:
    background 140ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 640px) {
body.eligibility-view .mobile-nav-button {
    align-items: center;
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    border-top: 0;
    box-sizing: border-box;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    margin: 0;
    min-height: 44px;
    padding-left: 12px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 28;
  }
body.eligibility-view .page-header {
    align-items: stretch;
    flex-direction: column;
  }
body.eligibility-view .project-page-header {
    flex-direction: column;
  }
body.eligibility-view .project-page-header-main {
    align-items: center;
    flex-direction: row;
  }
body.eligibility-view .compact-grid,
body.eligibility-view .checkbox-grid,
body.eligibility-view .crm-filter-grid,
body.eligibility-view .crm-intake-grid,
body.eligibility-view .crm-top-grid,
body.eligibility-view .conversion-bar,
body.eligibility-view .chart-workspace,
body.eligibility-view .chart-section-grid,
body.eligibility-view .chart-summary-grid,
body.eligibility-view .detail-grid,
body.eligibility-view .module-grid,
body.eligibility-view .note-detail-layout,
body.eligibility-view .note-editor-layout,
body.eligibility-view .note-section-grid,
body.eligibility-view .outcome-items-grid,
body.eligibility-view .schedule-controls,
body.eligibility-view .schedule-layout,
body.eligibility-view .settings-grid,
body.eligibility-view .split-panels,
body.eligibility-view .work-surface-grid,
body.eligibility-view .work-surface-grid.equal,
body.eligibility-view .metric-strip {
    grid-template-columns: 1fr;
  }
body.eligibility-view .button,
body.eligibility-view input,
body.eligibility-view select,
body.eligibility-view .portal-nav a {
    min-height: 44px;
  }
body.eligibility-view .crm-ledger > div,
body.eligibility-view .analytics-source-list > div,
body.eligibility-view .lead-drawer-summary,
body.eligibility-view .lead-detail-two-col,
body.eligibility-view .lead-touch-grid,
body.eligibility-view .mini-table > a,
body.eligibility-view .mini-table > div {
    grid-template-columns: 1fr;
  }
body.eligibility-view .lead-drawer-summary div {
    border-right: 0;
    border-top: 1px solid var(--line);
    padding: 8px 0 0;
  }
body.eligibility-view .lead-drawer-summary div:first-child {
    border-top: 0;
    padding-top: 0;
  }
body.eligibility-view .schedule-list .status-chip {
    color: var(--muted);
  }
}
body.eligibility-view .portal-frame,
body.eligibility-view .portal-sidebar,
body.eligibility-view .portal-brand,
body.eligibility-view .portal-nav a,
body.eligibility-view .portal-nav a > span,
body.eligibility-view .portal-utility-actions .button,
body.eligibility-view .sidebar-collapse-button {
  transition:
    background 140ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    grid-template-columns 220ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.eligibility-view .portal-brand-main div,
body.eligibility-view .portal-nav a div,
body.eligibility-view .portal-utility-actions .button span {
  min-width: 0;
}
body.eligibility-view .sidebar-collapse-button {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: inline-grid;
  flex: 0 0 auto;
  height: 32px;
  justify-items: center;
  width: 32px;
}
body.eligibility-view .sidebar-collapse-button:focus,
body.eligibility-view .sidebar-collapse-button:hover {
  border-color: var(--line-strong);
  color: var(--text);
  outline: 2px solid transparent;
}
body.eligibility-view .portal-utility-actions .button {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
}
@media (min-width: 641px) {
body.eligibility-view .portal-frame:has(.portal-sidebar-collapse:checked) .portal-brand-main div,
body.eligibility-view .portal-frame:has(.portal-sidebar-collapse:checked) .sidebar-user-details,
body.eligibility-view .portal-frame:has(.portal-sidebar-collapse:checked) .portal-nav a div,
body.eligibility-view .portal-frame:has(.portal-sidebar-collapse:checked) .portal-utility-actions .button span {
    display: none;
  }
body.eligibility-view .portal-frame:has(.portal-sidebar-collapse:checked) .sidebar-collapse-button {
    height: 28px;
    transform: rotate(180deg);
    width: 28px;
  }
body.eligibility-view .portal-frame:has(.portal-sidebar-collapse:checked) .portal-utility-actions .button {
    justify-content: center;
    padding-inline: 0;
  }
}
@media (max-width: 640px) {
body.eligibility-view .portal-sidebar-collapse,
body.eligibility-view .sidebar-collapse-button {
    display: none;
  }
}
body.eligibility-view .project-task-drawer .lead-drawer-panel {
  max-width: min(380px, 92vw);
  width: min(380px, 92vw);
}
body.eligibility-view .project-task-drawer-complete-button:hover,
body.eligibility-view .project-task-drawer-complete-button:focus-visible {
  background: color-mix(in srgb, var(--green-700) 18%, var(--white));
  border-color: color-mix(in srgb, var(--green-700) 48%, var(--line));
  color: var(--green-700);
}
body.eligibility-view .settings-page-header {
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
  padding-bottom: 16px;
}
body.eligibility-view .settings-tab-strip button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 750;
  margin-bottom: -1px;
  min-height: 44px;
  padding: 12px 14px;
}
body.eligibility-view .settings-tab-strip button:focus-visible,
body.eligibility-view .settings-tab-strip button:hover {
  color: var(--text);
  outline: 2px solid var(--sage-100);
  outline-offset: -2px;
}
body.eligibility-view .settings-tab-strip button[aria-selected="true"],
body.eligibility-view .settings-tab-strip button.is-active {
  border-bottom-color: var(--green-800);
  color: var(--text);
}
body.eligibility-view .identity-drawer .lead-drawer-panel {
  width: min(760px, 78vw);
}
body.eligibility-view .identity-drawer .lead-drawer-body {
  display: grid;
  gap: 18px;
}
.tracking-links-panel-head-actions-only { justify-content: flex-end; }
body.eligibility-view #identity-roles-drawer .settings-subsection:first-child .lead-drawer-form {
  margin-top: 0;
  padding-top: 8px;
}
body.eligibility-view .lead-analytics-status-table strong.status-chip {
  justify-self: start;
  width: fit-content;
}
body.eligibility-view .eligibility-page-header {
  align-items: flex-end;
}
body.eligibility-view .eligibility-page-header h1 {
  margin-bottom: 3px;
}
body.eligibility-view .eligibility-new-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
body.eligibility-view .eligibility-page-alert {
  margin-top: 12px;
}
body.eligibility-view .eligibility-metrics {
  grid-template-columns: repeat(2, minmax(150px, 220px));
}
body.eligibility-view .eligibility-table-header {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 12px 10px;
}
body.eligibility-view .eligibility-table-header h2 {
  font-size: 1rem;
  margin: 0;
}
body.eligibility-view .eligibility-table-header p {
  color: var(--muted);
  font-size: 0.8125rem;
  margin: 3px 0 0;
}
body.eligibility-view .eligibility-table-wrap {
  overflow-x: auto;
}
body.eligibility-view .eligibility-table-panel table {
  min-width: 920px;
}
body.eligibility-view .eligibility-table-panel tbody tr[data-drawer] {
  cursor: pointer;
}
body.eligibility-view .eligibility-status {
  white-space: nowrap;
}
body.eligibility-view .eligibility-status-active {
  background: var(--sage-100);
  border-color: var(--green-700);
  color: color-mix(in srgb, var(--green-700) 65%, var(--text));
}
body.eligibility-view .eligibility-status-inactive,
body.eligibility-view .eligibility-status-error {
  background: color-mix(in srgb, var(--coral) 12%, var(--white));
  border-color: var(--coral);
  color: color-mix(in srgb, var(--coral) 65%, var(--text));
}
body.eligibility-view .eligibility-status-unknown {
  background: color-mix(in srgb, var(--blue) 12%, var(--white));
  border-color: var(--blue);
  color: color-mix(in srgb, var(--blue) 65%, var(--text));
}
body.eligibility-view .eligibility-entry-drawer .lead-drawer-panel {
  width: min(660px, 82vw);
}
body.eligibility-view .eligibility-result-drawer .lead-drawer-panel {
  /* Result drawers stay white in both themes. Derive their readable ink and
     rules from this tenant's dark brand color instead of dark-mode text. */
  --ink: var(--green-900);
  --text: var(--green-900);
  --muted: color-mix(in srgb, var(--green-900) 68%, var(--white));
  --line: color-mix(in srgb, var(--green-900) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--green-900) 24%, transparent);
  --cream: color-mix(in srgb, var(--green-900) 3%, var(--white));
  --sage-100: color-mix(in srgb, var(--green-900) 3%, var(--white));
  --paper: var(--white);
  color: var(--text);
  color-scheme: light;
  width: min(980px, 78vw);
}
body.eligibility-view .eligibility-entry-drawer .lead-drawer-header .eyebrow,
body.eligibility-view .eligibility-result-drawer .lead-drawer-header .eyebrow {
  margin-bottom: 3px;
}
body.eligibility-view .eligibility-field-pair,
body.eligibility-view .insurance-card-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.eligibility-view .eligibility-form-fields {
  display: grid;
  gap: 12px;
}
body.eligibility-view .eligibility-form-fields label,
body.eligibility-view .insurance-card-grid label {
  min-width: 0;
}
body.eligibility-view .eligibility-form-fields input,
body.eligibility-view .eligibility-form-fields select,
body.eligibility-view .insurance-card-grid input {
  max-width: 100%;
}
body.eligibility-view .eligibility-payer-filter {
  margin-bottom: 0;
}
body.eligibility-view .eligibility-payer-combobox {
  display: block;
  position: relative;
}
body.eligibility-view .eligibility-payer-results {
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(20, 39, 32, 0.16);
  left: 0;
  max-height: 280px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
}
body.eligibility-view .eligibility-payer-results[hidden] {
  display: none;
}
body.eligibility-view .eligibility-payer-results [data-payer-option] {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}
body.eligibility-view .eligibility-payer-results [data-payer-option]:last-child {
  border-bottom: 0;
}
body.eligibility-view .eligibility-payer-results [data-payer-option]:hover,
body.eligibility-view .eligibility-payer-results [data-payer-option].is-active {
  background: var(--cream);
}
body.eligibility-view .eligibility-payer-results [data-payer-option] span {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.82rem;
}
body.eligibility-view .eligibility-payer-empty {
  color: var(--muted);
  display: block;
  padding: 11px 12px;
}
body.eligibility-view .card-dropzone {
  position: relative;
}
body.eligibility-view .card-dropzone .card-dropzone-input {
  height: 0.1px;
  min-height: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}
body.eligibility-view .card-dropzone .card-dropzone-target {
  align-items: center;
  background: var(--cream);
  border: 1.5px dashed var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-height: 168px;
  padding: 20px 16px;
  text-align: center;
  transition: background 140ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.eligibility-view .card-dropzone .card-dropzone-target:hover {
  background: var(--white);
  border-color: var(--green-800);
}
body.eligibility-view .card-dropzone .card-dropzone-input:focus-visible + .card-dropzone-target {
  border-color: var(--green-800);
  outline: 2px solid var(--green-800);
  outline-offset: 2px;
}
body.eligibility-view .card-dropzone.is-dragging .card-dropzone-target {
  background: var(--sage-100);
  border-color: var(--green-800);
  border-style: solid;
}
body.eligibility-view .card-dropzone.has-file .card-dropzone-target {
  border-color: var(--green-700);
  border-style: solid;
  padding: 10px;
}
body.eligibility-view .card-dropzone .card-dropzone-icon {
  color: var(--muted);
  height: 30px;
  width: 30px;
}
body.eligibility-view .card-dropzone.has-file .card-dropzone-icon {
  display: none;
}
body.eligibility-view .card-dropzone .card-dropzone-label {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
}
body.eligibility-view .card-dropzone.has-file .card-dropzone-label {
  display: none;
}
body.eligibility-view .card-dropzone .card-dropzone-hint {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
body.eligibility-view .card-dropzone .card-dropzone-preview {
  border-radius: 6px;
  display: block;
  max-height: 190px;
  max-width: 100%;
  object-fit: contain;
}
body.eligibility-view .card-dropzone .card-dropzone-clear {
  background: none;
  min-height: 0;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 6px;
  padding: 2px 0;
  text-decoration: underline;
}
body.eligibility-view .card-dropzone .card-dropzone-clear:hover {
  color: var(--coral);
}
body.eligibility-view .eligibility-other-benefits {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 12px;
}
body.eligibility-view .eligibility-other-benefits > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
body.eligibility-view .field-help {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 2px;
}
body.eligibility-view .eligibility-service-help {
  margin: -4px 0 0;
}
body.eligibility-view .eligibility-review-actions {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
body.eligibility-view .eligibility-confirmation {
  background: color-mix(in srgb, var(--sage-100) 36%, var(--cream));
  border: 1px solid var(--green-800);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 14px;
}
body.eligibility-view .eligibility-confirmation[hidden] {
  display: none;
}
body.eligibility-view .eligibility-confirmation h3 {
  font-size: 1rem;
  margin: 0;
}
body.eligibility-view .eligibility-confirmation p {
  margin: 3px 0 0;
}
body.eligibility-view .eligibility-review-summary,
body.eligibility-view .eligibility-detail-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
body.eligibility-view .eligibility-review-summary div,
body.eligibility-view .eligibility-detail-grid div {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 2px;
  padding: 9px 10px;
}
body.eligibility-view .eligibility-review-summary dt,
body.eligibility-view .eligibility-detail-grid dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
body.eligibility-view .eligibility-review-summary dd,
body.eligibility-view .eligibility-detail-grid dd {
  font-size: 0.875rem;
  margin: 0;
  overflow-wrap: anywhere;
}
body.eligibility-view .stack-form label.eligibility-confirm-checkbox {
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  font-weight: 650;
  gap: 10px;
  line-height: 1.4;
  padding: 11px 12px;
}
body.eligibility-view .eligibility-confirm-checkbox input {
  flex: 0 0 auto;
  margin-top: 2px;
  min-height: auto;
}
body.eligibility-view .eligibility-confirmation .button-row {
  justify-content: flex-end;
  margin: 0;
}
body.eligibility-view .eligibility-extraction-note ul {
  margin: 7px 0 0;
  padding-left: 20px;
}
body.eligibility-view .eligibility-drawer-heading-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
body.eligibility-view .eligibility-result-body {
  padding: 0 20px 24px;
}
body.eligibility-view .eligibility-detail-section {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
body.eligibility-view .eligibility-detail-section:first-child {
  border-top: 0;
}
body.eligibility-view .eligibility-detail-section h3 {
  font-size: 1rem;
  margin: 0 0 10px;
}
body.eligibility-view .eligibility-compression-summary > .eyebrow {
  color: #4f6f65;
  margin: 0 0 3px;
}
body.eligibility-view .eligibility-compression-intro {
  color: #4f6f65;
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: -4px 0 10px;
}
body.eligibility-view .eligibility-compression-summary .eligibility-payer-lines {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 12px;
}
body.eligibility-view .eligibility-compression-summary .eligibility-payer-lines > summary {
  color: #17372f;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
}
body.eligibility-view .eligibility-response-errors {
  margin-top: 12px;
}
body.eligibility-view .eligibility-response-errors p {
  margin: 0;
}
body.eligibility-view .eligibility-response-errors p + p {
  margin-top: 6px;
}
body.eligibility-view .eligibility-benefit-table {
  margin-top: 14px;
  overflow-x: auto;
}
body.eligibility-view .eligibility-benefit-table table {
  min-width: 760px;
}
/* The plain-language answer: the four things a verification is run to find out,
   sized to be read off the screen while the patient is on the phone.

   Every colour here is fixed rather than tokenised. The drawer panel is painted
   var(--white), which the dark theme deliberately keeps at #ffffff, so the ink
   tokens -- which do flip -- come out near-invisible on it. These are the
   figures someone reads aloud to a patient, so they are pinned legible in both
   themes. The result drawer also scopes its inherited ink and rule tokens
   to its white surface without changing adjacent portal drawers. */
body.eligibility-view .eligibility-plain h3,
body.eligibility-view .eligibility-message h4,
body.eligibility-view .eligibility-unanswered h4 {
  color: #17372f;
}
body.eligibility-view .eligibility-pt-status {
  color: #17372f;
  font-size: 0.875rem;
  margin: 0 0 12px;
}
body.eligibility-view .eligibility-pt-network {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}
body.eligibility-view .eligibility-pt-network h4 {
  background: color-mix(in srgb, var(--sage-100) 30%, var(--white));
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  color: #17372f;
  font-size: 0.875rem;
  margin: 0;
  padding: 11px 10px;
}
body.eligibility-view .eligibility-error-summary .inline-alert {
  display: block;
  overflow-wrap: anywhere;
}
body.eligibility-view .eligibility-error-summary h3 {
  color: inherit;
}
body.eligibility-view .eligibility-error-summary p {
  margin: 8px 0 0;
}
body.eligibility-view .eligibility-error-details {
  margin: 10px 0 0;
  padding-left: 20px;
}
body.eligibility-view .eligibility-error-details li + li {
  margin-top: 6px;
}
body.eligibility-view .eligibility-answers {
  display: grid;
  gap: 0;
  margin: 0;
}
body.eligibility-view .eligibility-answer {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 3px;
  padding: 11px 10px;
}
body.eligibility-view .eligibility-answer:last-child {
  border-bottom: 0;
}
body.eligibility-view .eligibility-answer dt {
  color: color-mix(in srgb, #17372f 62%, var(--white));
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.eligibility-view .eligibility-answer dd {
  display: grid;
  gap: 2px;
  margin: 0;
}
body.eligibility-view .eligibility-answer-value {
  color: #17372f;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}
body.eligibility-view .eligibility-answer-detail {
  color: color-mix(in srgb, #17372f 80%, var(--white));
  font-size: 0.8125rem;
}
body.eligibility-view .eligibility-answer-source {
  color: color-mix(in srgb, #17372f 55%, var(--white));
  font-size: 0.7rem;
  line-height: 1.4;
}
body.eligibility-view .eligibility-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
body.eligibility-view .eligibility-extras li {
  background: color-mix(in srgb, var(--sage-100) 30%, var(--white));
  border: 1px solid color-mix(in srgb, var(--sage-100) 70%, var(--white));
  color: #17372f;
  border-radius: 8px;
  display: grid;
  gap: 1px;
  padding: 7px 11px;
}
body.eligibility-view .eligibility-extras span {
  color: color-mix(in srgb, #17372f 62%, var(--white));
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.eligibility-view .eligibility-extras strong {
  font-size: 0.9375rem;
}
body.eligibility-view .eligibility-extras em {
  color: color-mix(in srgb, #17372f 62%, var(--white));
  font-size: 0.7rem;
  font-style: normal;
}
body.eligibility-view .eligibility-unanswered {
  background: color-mix(in srgb, var(--coral) 10%, var(--white));
  border: 1px solid color-mix(in srgb, var(--coral) 55%, var(--white));
  color: #17372f;
  border-radius: 8px;
  margin-top: 14px;
  padding: 11px 13px;
}
body.eligibility-view .eligibility-unanswered h4 {
  font-size: 0.8125rem;
  margin: 0 0 6px;
}
body.eligibility-view .eligibility-unanswered ul {
  margin: 0;
  padding-left: 18px;
}
body.eligibility-view .eligibility-unanswered li {
  color: #17372f;
  font-size: 0.8125rem;
  line-height: 1.5;
}
body.eligibility-view .eligibility-unanswered p {
  color: color-mix(in srgb, #17372f 66%, var(--white));
  font-size: 0.75rem;
  margin: 6px 0 0;
}
body.eligibility-view .eligibility-message {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 14px;
}
body.eligibility-view .eligibility-patient-draft > .eligibility-message {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
body.eligibility-view .eligibility-message h4 {
  font-size: 0.9375rem;
  margin: 0;
}
body.eligibility-view .eligibility-message-text {
  background: var(--white);
  border: 1px solid color-mix(in srgb, #17372f 22%, var(--white));
  color: #17372f;
  border-radius: 8px;
  display: block;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.55;
  margin-top: 8px;
  padding: 11px 12px;
  resize: vertical;
  width: 100%;
}
body.eligibility-view .eligibility-message-actions {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
body.eligibility-view .eligibility-message .field-help,
body.eligibility-view .eligibility-message-actions .field-help {
  color: color-mix(in srgb, #17372f 60%, var(--white));
}
body.eligibility-view .eligibility-message-actions .field-help {
  margin-top: 0;
}
body.eligibility-view .eligibility-notes {
  color: color-mix(in srgb, #17372f 60%, var(--white));
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 14px 0 0;
  padding-left: 18px;
}
body.eligibility-view .eligibility-payer-lines {
  margin-top: 14px;
}
body.eligibility-view .eligibility-payer-lines > summary {
  color: color-mix(in srgb, #17372f 62%, var(--white));
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 700;
}
body.eligibility-view .eligibility-raw-response {
  margin-top: 14px;
}
body.eligibility-view .eligibility-raw-response summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 700;
}
body.eligibility-view .eligibility-raw-response pre {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.75rem;
  max-height: 320px;
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
  word-break: break-all;
}
body.eligibility-view [data-theme="dark"] .inline-alert.error {
  background: color-mix(in srgb, var(--coral) 22%, var(--cream));
  border-color: var(--coral);
  color: var(--text);
}
body.eligibility-view .newsletter-page-header {
  align-items: flex-end;
}
body.eligibility-view .newsletter-page-header h1 {
  margin-bottom: 3px;
}
body.eligibility-view .newsletter-table-panel {
  overflow: hidden;
}
body.eligibility-view .newsletter-table-panel table {
  min-width: 760px;
}
body.eligibility-view .newsletter-table-panel tbody tr[data-drawer-url] {
  cursor: pointer;
}
body.eligibility-view .newsletter-table-panel tbody tr[data-drawer-url]:hover {
  background: color-mix(in srgb, var(--green-800) 6%, var(--cream));
}
body.eligibility-view .newsletter-empty-state {
  gap: 10px;
  padding-block: 34px;
}
body.eligibility-view .newsletter-compact-drawer .lead-drawer-panel {
  width: min(540px, 86vw);
}
body.eligibility-view .newsletter-audience-drawer .lead-drawer-panel {
  width: min(1040px, 84vw);
}
body.eligibility-view .newsletter-editor-drawer .lead-drawer-panel {
  width: min(1240px, 88vw);
}
body.eligibility-view .newsletter-send-drawer .lead-drawer-panel {
  width: min(680px, 84vw);
}
body.eligibility-view .newsletter-import-form .button {
  justify-self: start;
}
body.eligibility-view .newsletter-person-actions .button {
  min-height: 32px;
  padding: 5px 7px;
}
body.eligibility-view .newsletter-starter-button {
  justify-self: start;
  margin: 10px 0;
}
body.eligibility-view .stack-form label.newsletter-choice-card {
  align-items: start;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}
body.eligibility-view .stack-form .newsletter-send-lists label {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  font-weight: 600;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 9px 10px;
}
body.eligibility-view .stack-form .newsletter-send-lists label:last-child {
  border-bottom: 0;
}
body.eligibility-view .stack-form label.newsletter-send-check {
  align-items: start;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}
@media (max-width: 1100px) {
body.eligibility-view .eligibility-result-drawer .lead-drawer-panel {
    width: min(920px, 88vw);
  }
body.eligibility-view .newsletter-editor-drawer .lead-drawer-panel {
    width: min(1100px, 92vw);
  }
}
@media (max-width: 720px) {
body.eligibility-view .eligibility-page-header {
    align-items: stretch;
  }
body.eligibility-view .eligibility-new-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
body.eligibility-view .eligibility-new-actions .button {
    justify-content: center;
    text-align: center;
  }
body.eligibility-view .eligibility-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
body.eligibility-view .eligibility-entry-drawer .lead-drawer-panel,
body.eligibility-view .eligibility-result-drawer .lead-drawer-panel {
    max-width: 100vw;
    width: 100vw;
  }
body.eligibility-view .eligibility-field-pair,
body.eligibility-view .insurance-card-grid,
body.eligibility-view .eligibility-review-summary,
body.eligibility-view .eligibility-detail-grid {
    grid-template-columns: 1fr;
  }
body.eligibility-view .eligibility-drawer-heading-actions {
    align-items: flex-end;
    flex-direction: column-reverse;
  }
body.eligibility-view .eligibility-result-body {
    padding-inline: 14px;
  }
body.eligibility-view .newsletter-page-header {
    align-items: stretch;
  }
body.eligibility-view .newsletter-page-actions .button {
    justify-content: center;
  }
body.eligibility-view .newsletter-compact-drawer .lead-drawer-panel,
body.eligibility-view .newsletter-audience-drawer .lead-drawer-panel,
body.eligibility-view .newsletter-editor-drawer .lead-drawer-panel,
body.eligibility-view .newsletter-send-drawer .lead-drawer-panel {
    max-width: 100vw;
    width: 100vw;
  }
body.eligibility-view .newsletter-production-actions .button {
    justify-content: center;
    width: 100%;
  }
body.eligibility-view .newsletter-inline-form .button {
    justify-content: center;
  }
}
@media (max-width: 430px) {
body.eligibility-view .eligibility-metrics {
    grid-template-columns: 1fr;
  }
body.eligibility-view .eligibility-confirmation .button-row {
    display: grid;
    grid-template-columns: 1fr;
  }
body.eligibility-view .newsletter-bulk-bar select,
body.eligibility-view .newsletter-bulk-bar .button {
    width: 100%;
  }
}
body.eligibility-view .button.danger {
  background: color-mix(in srgb, var(--coral) 12%, var(--white));
  color: var(--coral);
  border: 1px solid color-mix(in srgb, var(--coral) 30%, transparent);
}
body.eligibility-view .button.danger:hover {
  background: color-mix(in srgb, var(--coral) 18%, var(--cream));
}
body.eligibility-view .kb-archive-button {
  width: 100%;
  margin-top: 12px;
}

/* ---- Directory ----------------------------------------------------------
   Deliberately thin: the Directory reuses the password vault's native-vault-*
   shell, so only the bits the vault has no equivalent for live here. */
.dir-category-select {
  flex: 0 0 auto;
  max-width: 220px;
}

/* The visible custom-select wrapper owns the layout width after enhancement.
   Size it to the longest GFPT category instead of letting it fill the toolbar. */
body.directory-view .wh-select--dir-category-select {
  flex: 0 0 auto;
  width: 248px;
  max-width: 100%;
}

.dir-form {
  display: grid;
  gap: 14px;
  padding: 4px 2px 2px;
}

.dir-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.dir-custom-fields {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 2px 0 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.dir-custom-fields legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#dirCustomFields {
  display: grid;
  gap: 10px;
}

.dir-custom-field-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(200px, 1fr) 42px;
  gap: 10px;
  align-items: end;
}

.dir-custom-field-row .icon-button {
  width: 42px;
  height: 42px;
}

.dir-custom-field-add {
  width: fit-content;
}

@media (max-width: 720px) {
  .dir-custom-field-row {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .dir-custom-field-row label:first-child {
    grid-column: 1 / -1;
  }
}

.dir-form label,
.dir-detail-notes span {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.dir-form input,
.dir-form textarea {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.dir-detail-notes {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
}

.dir-detail-notes p {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  white-space: pre-line;
}

.icon-button.copied i,
.icon-button.copied [data-lucide] {
  color: var(--green-700);
}

@media (max-width: 720px) {
  .dir-category-select { max-width: none; flex: 1 1 100%; }
}

/* ---- Tech Support ------------------------------------------------------- */
body.tech-support-view .topbar { margin-bottom: 26px; }
.support-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.support-intro p {
  margin: 0;
  max-width: 62ch;
  color: var(--text);
}

.ticket-list {
  display: grid;
  gap: 10px;
}

.ticket-card {
  display: flex;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--soft-shadow);
}

.ticket-card.status-open { border-left-color: var(--gold); }
.ticket-card.status-in_progress { border-left-color: var(--green-700); }
.ticket-card.status-blocked { border-left-color: var(--coral); }
.ticket-card.status-done { border-left-color: var(--green-800); opacity: 0.62; }

.ticket-card.dragging {
  opacity: 0.45;
  outline: 2px dashed var(--gold);
}

.ticket-rank {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-weight: 750;
  font-size: 12px;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}

.ticket-rank i,
.ticket-rank [data-lucide] { width: 16px; height: 16px; }

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

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

.ticket-head h3 { margin: 0; font-size: 0.98rem; }

.ticket-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  /* Comments can expand a card substantially; keep its actions at the
     request heading instead of vertically re-centering them. */
  align-self: flex-start;
  flex-shrink: 0;
}

.ticket-actions select {
  font-size: 12px;
  padding: 4px 8px;
}

.ticket-actions .icon-button {
  width: auto;
  min-width: var(--control-h, 44px);
  padding-inline: 12px;
  border-radius: var(--control-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.ticket-actions .icon-button > span {
  display: inline;
}

.ticket-actions .icon-button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

body.tech-support-view .ticket-complete {
  min-width: 128px;
  white-space: nowrap;
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(var(--green-800-rgb), 0.18);
}

body.tech-support-view .ticket-delete {
  min-width: 96px;
  white-space: nowrap;
  background: #fde8e1;
  border-color: #e8b7a8;
  color: #92391f;
  box-shadow: none;
}

body.tech-support-view .ticket-complete:hover {
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--white);
}

body.tech-support-view .ticket-delete:hover {
  background: #f8d5ca;
  border-color: #cd846c;
  color: #7d2e18;
  box-shadow: none;
}

/* On desktop, a ticket title may grow to several lines (especially for a
   completed request). Give its text column the flexible space and reserve one
   unbroken action strip, rather than letting the controls wrap beneath it. */
@media (min-width: 721px) {
  body.tech-support-view .ticket-card {
    align-items: center;
  }

  body.tech-support-view .ticket-body {
    flex: 1 1 0;
  }

  body.tech-support-view .ticket-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    min-width: max-content;
    white-space: nowrap;
  }

  body.tech-support-view .ticket-actions > * {
    flex: 0 0 auto;
  }

  body.tech-support-view .ticket-actions .ticket-status {
    width: 124px;
  }

  /* The status select is replaced with a .wh-select wrapper after render.
     Without this matching width, the wrapper's shared 100% width consumes the
     whole action strip and pushes Delete / Completed out of the ticket. */
  body.tech-support-view .ticket-actions .wh-select--ticket-status {
    flex: 0 0 124px;
    width: 124px;
  }
}

.ticket-desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text);
  white-space: pre-line;
}

.ticket-meta {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.ticket-comments-toggle {
  background: none;
  border: 0;
  padding: 0;
  color: var(--gold);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.ticket-comments {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.ticket-comment-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.ticket-comment-form {
  display: flex;
  gap: 8px;
}

.ticket-comment-form input { flex: 1 1 auto; min-width: 0; }

@media (max-width: 640px) {
  .dir-list { grid-template-columns: 1fr; }
  .support-intro { align-items: stretch; }
}

@media (max-width: 720px) {
  body[data-mobile-navigation="bottom"].tech-support-view .support-intro {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  /* The mobile title bar already provides the page chrome. Bring the queue
     slightly closer to it so the first ticket is visible sooner. */
  body[data-mobile-navigation="bottom"].tech-support-view .app-main {
    padding-top: 10px;
  }

  body[data-mobile-navigation="bottom"] .mobile-view-actions #ticketAdd,
  body[data-mobile-navigation="bottom"] .mobile-view-actions #ticketAdd span,
  body[data-mobile-navigation="bottom"] .mobile-view-actions #ticketAdd svg {
    color: var(--white);
  }

  body[data-mobile-navigation="bottom"].tech-support-view .support-completed-control {
    display: flex;
    margin-top: 16px;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .support-completed-control #ticketShowCompleted {
    width: 100%;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-rank {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    padding-top: 3px;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-body {
    grid-column: 2;
    grid-row: 1;
    width: auto;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-meta {
    display: grid;
    gap: 6px;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-comments-toggle {
    justify-self: start;
    text-align: left;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-actions > .ticket-status,
  body[data-mobile-navigation="bottom"].tech-support-view .ticket-actions > .ticket-chip,
  body[data-mobile-navigation="bottom"].tech-support-view .ticket-actions > .wh-select {
    grid-column: 1 / -1;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-delete {
    grid-column: 1;
    grid-row: 2;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-complete {
    grid-column: 2;
    grid-row: 2;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-actions > * {
    width: 100%;
    min-width: 0;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-actions .icon-button {
    width: 100%;
    min-height: var(--control-h, 44px);
    padding-inline: 12px;
    border-radius: var(--control-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-actions .icon-button svg {
    width: 17px;
    height: 17px;
  }

  body[data-mobile-navigation="bottom"].tech-support-view .ticket-actions .icon-button > span {
    display: inline;
  }
}


/* ---- Reviews hub -------------------------------------------------------- */
.reviews-shell {
  display: grid;
  gap: 16px;
}

.reviews-overview {
  display: grid;
  gap: 14px;
}

.reviews-headline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.reviews-headline-value {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.reviews-headline p {
  margin: 0;
  font-size: 13px;
}

.review-stars {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}

.review-stars i,
.review-stars [data-lucide] {
  width: 14px;
  height: 14px;
  color: var(--line-strong);
}

.review-stars .on {
  color: var(--gold);
  fill: currentColor;
}

.review-source-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.review-source-card {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  box-shadow: var(--soft-shadow);
}

.review-source-card.empty {
  opacity: 0.72;
}

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

.review-source-head a {
  color: var(--muted);
  display: inline-flex;
}

.review-source-head a:hover {
  color: var(--gold);
}

.review-source-score {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-score-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.review-source-meta {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Says plainly whether a number was synced or typed in, so a hand-entered
   figure is never mistaken for live data. */
.review-basis {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
}

.review-basis.counted {
  color: var(--green-700);
  border-color: var(--green-700);
}

.review-basis.stated {
  color: var(--muted);
}

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

.review-unanswered-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}

.review-list {
  display: grid;
  gap: 10px;
}

.review-row {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  background: var(--paper);
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}

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

.review-row-head > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.review-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.review-chip {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid rgba(var(--green-900-rgb), 0.14);
  border-radius: 999px;
  background: var(--sage-100);
  color: var(--green-800);
}
.review-chip svg { width: 12px; height: 12px; }

.review-author {
  font-size: 13px;
}

/* Reviews snapshot redesign --------------------------------------------- */
.reviews-shell { gap: 18px; }
.reviews-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.reviews-page-heading h1 { display: none; }
.reviews-page-heading p { margin: 0; color: var(--muted); font-size: 0.82rem; }
.reviews-heading-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.reviews-heading-actions button { display: inline-flex; align-items: center; gap: 0.4rem; }
.reviews-heading-actions svg { width: 14px; height: 14px; }
.reviews-page-heading:not(:has(.reviews-heading-actions)) { display: none; }
.reviews-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.reviews-metric-card {
  display: grid;
  gap: 0.35rem;
  min-height: 126px;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.reviews-metric-card > span { color: var(--muted); font-size: 0.76rem; font-weight: 700; }
.reviews-metric-card > strong { color: var(--ink); font-size: 2rem; line-height: 1; }
.reviews-metric-card > small { color: var(--muted); font-size: 0.72rem; }
.reviews-metric-card .review-stars { min-height: 16px; }
.reviews-sync-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
}
.reviews-sync-status svg { width: 14px; height: 14px; flex: 0 0 auto; }
.link-button { padding: 0; border: 0; background: transparent; color: var(--green-700); cursor: pointer; font: inherit; font-weight: 700; }
.reviews-insight-grid { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 12px; }
.reviews-panel,
.reviews-unresolved-panel { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.reviews-panel { min-height: 230px; padding: 1rem 1.1rem; }
.reviews-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.reviews-panel-heading h2 { margin: 0; font-size: 0.9rem; }
.reviews-panel-heading span { color: var(--muted); font-size: 0.72rem; }
.reviews-distribution { display: grid; gap: 0.7rem; margin-top: 1.1rem; }
.reviews-distribution-row { display: grid; grid-template-columns: 42px 1fr 28px; align-items: center; gap: 0.45rem; font-size: 0.76rem; }
.reviews-distribution-row > span { display: inline-flex; align-items: center; gap: 0.15rem; }
.reviews-distribution-row svg { width: 12px; height: 12px; color: var(--gold); fill: currentColor; }
.reviews-distribution-row > div { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-muted, rgba(0,0,0,0.06)); }
.reviews-distribution-row b { display: block; height: 100%; border-radius: inherit; background: var(--green-700); opacity: 0.68; }
.reviews-distribution-row > strong { text-align: right; font-size: 0.74rem; }
.reviews-trend-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.55rem; height: 166px; margin-top: 0.8rem; padding: 0.25rem 0.4rem 0; }
.reviews-trend-item { min-width: 0; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 0.2rem; }
.reviews-trend-track { width: 100%; min-height: 0; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--line); background: linear-gradient(to top, transparent 49%, var(--line) 50%, transparent 51%); }
.reviews-trend-track b { display: block; width: min(30px, 66%); border-radius: 5px 5px 0 0; background: var(--green-700); opacity: 0.78; }
.reviews-trend-item span { color: var(--text); font-size: 0.68rem; font-weight: 700; }
.reviews-trend-item small { min-height: 1em; color: var(--muted); font-size: 0.62rem; }
.reviews-chart-empty { display: grid; place-items: center; height: 170px; color: var(--muted); text-align: center; font-size: 0.78rem; }
.reviews-platform-list { display: grid; gap: 0.75rem; margin-top: 1.1rem; }
.reviews-platform-list > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.65rem; font-size: 0.78rem; }
.reviews-platform-list strong { font-variant-numeric: tabular-nums; }
.reviews-platform-list small { color: var(--gold); min-width: 42px; text-align: right; }
.reviews-unresolved-panel { overflow: hidden; }
.reviews-unresolved-panel > .reviews-panel-heading { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); align-items: center; }
.reviews-unresolved-panel h2 { display: flex; align-items: center; gap: 0.45rem; }
.reviews-unresolved-panel h2 em { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--sage-200, #dfe9df); color: var(--green-800); font-size: 0.72rem; font-style: normal; }
.reviews-unresolved-panel p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.74rem; }
.reviews-unresolved-panel .reviews-toolbar { justify-content: flex-end; flex-wrap: nowrap; }
.reviews-unresolved-panel .reviews-toolbar .wh-select { flex: 0 1 180px; width: 180px; }
.reviews-unresolved-panel .reviews-toolbar .review-unanswered-toggle { display: none; }
.reviews-page-size { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.reviews-page-size select { min-width: 76px; }
.reviews-unresolved-list { display: grid; }
.reviews-unresolved-row { display: grid; grid-template-columns: 150px 80px minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); }
.reviews-unresolved-row:last-child { border-bottom: 0; }
.reviews-unresolved-source { display: grid; gap: 0.2rem; min-width: 0; }
.reviews-unresolved-source strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }
.reviews-unresolved-source small { color: var(--muted); font-size: 0.7rem; }
.reviews-unresolved-row > p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 0.78rem; }
.reviews-unresolved-rating .review-stars { flex-wrap: nowrap; }
.reviews-unresolved-actions { display: flex; align-items: center; gap: 0.3rem; }
.reviews-unresolved-actions .secondary-btn { min-height: 30px; padding: 0.3rem 0.65rem; font-size: 0.72rem; }
.review-empty { display: grid; gap: 0.35rem; padding: 1.3rem 1.1rem; color: var(--muted); font-size: 0.8rem; }
.reviews-pagination { min-height: 66px; padding: 0.65rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); }
.reviews-pagination p { margin: 0; color: var(--muted); font-size: 0.72rem; }
.reviews-pagination > div { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
.reviews-pagination button { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); color: var(--text); cursor: pointer; }
.reviews-pagination button[aria-current="page"] { border-color: var(--green-700); background: var(--green-700); color: white; }
.reviews-pagination button:disabled { cursor: default; opacity: 0.42; }
.reviews-pagination button svg { width: 16px; height: 16px; }
.reviews-pagination span { padding: 0 0.15rem; color: var(--muted); }

body.reviews-reply-open { overflow: hidden; }
.review-reply-overlay { position: fixed; z-index: 110; inset: 0; display: flex; justify-content: flex-end; }
.review-reply-backdrop { position: absolute; inset: 0; background: rgba(var(--green-900-rgb), 0.42); backdrop-filter: blur(3px); }
.review-reply-drawer { position: relative; z-index: 1; width: min(520px, 100vw); height: 100%; display: flex; flex-direction: column; border-left: 1px solid var(--line-strong); background: var(--paper); box-shadow: -18px 0 44px rgba(var(--green-900-rgb), 0.2); animation: knowledge-drawer-in 0.18s ease-out; }
.review-reply-drawer > header { min-height: 76px; padding: 0 1.2rem 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.review-reply-drawer > header p { margin: 0 0 0.2rem; }
.review-reply-drawer > header h2 { margin: 0; color: var(--ink); font-size: 1rem; }
.review-reply-drawer form { min-height: 0; flex: 1; padding: 1.4rem 1.5rem max(1.5rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; }
.review-reply-drawer form > label { display: grid; gap: 0.45rem; color: var(--text); font-size: 0.78rem; font-weight: 700; }
.review-reply-drawer textarea { width: 100%; resize: vertical; }
.review-reply-original { padding: 1rem; display: grid; gap: 0.65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-muted, var(--sage-100)); }
.review-reply-original p { margin: 0; color: var(--text); font-size: 0.8rem; line-height: 1.55; }
.review-reply-confirm { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 500 !important; line-height: 1.45; }
.review-reply-confirm input { margin-top: 0.15rem; }

@media (max-width: 980px) {
  .reviews-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-insight-grid { grid-template-columns: 1fr 1fr; }
  .reviews-insight-grid .reviews-panel:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .reviews-page-heading { align-items: stretch; flex-direction: column; }
  .reviews-metric-grid, .reviews-insight-grid { grid-template-columns: 1fr; }
  .reviews-insight-grid .reviews-panel:last-child { grid-column: auto; }
  .reviews-unresolved-panel > .reviews-panel-heading { align-items: stretch; flex-direction: column; }
  .reviews-unresolved-panel .reviews-toolbar { justify-content: flex-start; }
  .reviews-unresolved-panel .reviews-toolbar .wh-select { flex: 1 1 0; width: auto; min-width: 0; }
  .reviews-unresolved-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .reviews-unresolved-row > p { white-space: normal; }
  .reviews-unresolved-actions { justify-content: flex-start; }
  .reviews-pagination { align-items: flex-start; flex-direction: column; }
  .reviews-pagination > div { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 0.2rem; }
  .review-reply-drawer { width: 100vw; }
}

.review-row h3 {
  margin: 0;
  font-size: 0.98rem;
}

.review-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-line;
}

.review-reply {
  margin: 4px 0 0;
  padding: 8px 10px;
  background: rgba(var(--ink-rgb), 0.04);
  font-size: 13px;
  border-left: 2px solid var(--green-700);
}

.review-reply span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}

.review-unanswered {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--coral);
}

.reviews-unresolved-panel .review-empty { padding: 1.3rem 1.1rem; }

/* ---- platform configuration -------------------------------------------- */
.reviews-config-category {
  margin: 16px 0 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.reviews-config-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.reviews-config-row {
  border: 1px solid var(--line);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.reviews-config-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.reviews-config-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.reviews-config-fields {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr;
}

.reviews-config-fields input {
  font-size: 13px;
  padding: 6px 8px;
}

/* live / planned / manual, so nobody expects a sync that cannot exist */
.review-sync-badge {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}

.review-sync-badge.sync-live {
  color: var(--green-700);
  border-color: var(--green-700);
}

.review-sync-badge.sync-planned {
  color: var(--amber);
  border-color: var(--amber);
}

.reviews-import {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.reviews-import summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.reviews-import textarea,
.reviews-import select {
  width: 100%;
  margin-top: 8px;
  font-size: 13px;
}

@media (max-width: 720px) {
  .review-source-grid,
  .reviews-config-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- validated series palette ------------------------------------------
   Worst adjacent CVD deltaE 17.6 / 18.1 (light / dark); threshold is 8.
   platform default; a client with no theme of its own inherits this.
   Slot 1 keeps the brand hue. Regenerate with the dataviz validator if
   these are ever edited by hand -- they are computed, not chosen. */
:root {
  --chart-1: #007654;
  --chart-2: #8e68cd;
  --chart-3: #997513;
  --chart-4: #00588c;
  --chart-5: #903606;
  --chart-6: #019ea6;
}
html[data-theme="dark"] {
  --chart-1: #007b58;
  --chart-2: #9a75da;
  --chart-3: #af8b38;
  --chart-4: #0470ae;
  --chart-5: #b44b19;
  --chart-6: #16a4ac;
}

/* ---- Booking view ---- */
.booking-shell {
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap, 20px);
  min-width: 0;
}
.booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
}
.booking-readiness-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border, #d6d9dd);
  border-radius: 8px;
  background: var(--panel-bg, #fff);
}
.booking-readiness-card .muted {
  overflow-wrap: anywhere;
  font-size: .78rem;
}
.booking-readiness-card strong { font-size: 1.05rem; color: var(--text, #1f2937); }
.delivery-attention-reasons {
  grid-column: 1 / -1;
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .booking-grid { grid-template-columns: 1fr; }
}
.booking-form-panel,
.booking-slots-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.booking-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.booking-field > label,
.booking-field-heading {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: capitalize;
}
.booking-field-heading { margin: 0; }
.booking-field input:not([type]),
.booking-field input[type="text"],
.booking-field input[type="email"],
.booking-field input[type="tel"],
.booking-field input[type="date"],
.booking-field select,
.booking-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--panel-bg, #fff);
  color: var(--text, #111827);
  font: inherit;
  min-height: 44px;
  box-sizing: border-box;
}
.booking-field textarea { resize: vertical; }
.booking-price { font-size: 0.9rem; }
.booking-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.booking-slot {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 110px;
  padding: 8px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--panel-bg, #fff);
  color: var(--text, #0f0f0f);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s;
}
.booking-slot:hover { border-color: var(--accent, #0470ae); }
.booking-slot.selected {
  border-color: var(--accent, #0470ae);
  background: color-mix(in srgb, var(--accent, #0470ae) 12%, transparent);
}
.booking-slot .slot-time { font-weight: 600; }
.booking-slot .slot-resource { font-size: 0.74rem; color: var(--text-muted, #6b7280); }
.booking-actions { margin-top: 4px; }
.booking-calendar-scroll { overflow-x: auto; max-width: 100%; }
.booking-calendar-scroll table { min-width: 680px; }
.booking-calendar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.class-notice { padding: 12px 16px; border-left: 3px solid currentColor; background: var(--surface-muted, #f3f4f6); }
.class-attendance-review { display: grid; gap: 12px; margin: 18px 0; padding: 16px; border: 1px solid var(--border, #d6d9dd); border-radius: 9px; background: var(--panel-bg, #fff); }
.class-attendance-review h3 { margin: 0 0 4px; }
.class-attendance-review > .panel-title-row { align-items: flex-start; }
.class-attendance-review > .panel-title-row > strong { color: var(--text-muted, #6b7280); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; text-align: right; }
.class-attendance-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; color: var(--text-muted, #6b7280); font-size: .8rem; }
.class-attendance-summary span { padding: 8px; border: 1px solid var(--border, #d6d9dd); border-radius: 6px; background: var(--surface-muted, #f3f4f6); }
.class-attendance-review .class-notice { margin: 0; }
.class-roster-dialog button:disabled { cursor: not-allowed; opacity: .62; }
.class-draft { margin-top: 24px; }
.class-draft summary, .class-roster-dialog summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.class-weekdays { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 16px; margin: 16px 0; }
.class-weekdays label, .class-check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.class-weekdays input, .class-check input { width: auto; }
.class-occurrences, .class-roster-list { display: grid; gap: 12px; margin: 20px 0; }
.class-occurrence, .class-roster-person { display: flex; gap: 16px; align-items: center; justify-content: space-between; border: 1px solid var(--border, #d6d9dd); padding: 16px; }
.class-occurrence p, .class-roster-person p { margin: 6px 0; }
.class-roster-dialog { box-sizing: border-box; width: min(820px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--border, #d6d9dd); color: inherit; background: var(--surface, #fff); overflow: auto; }
.class-roster-dialog::backdrop { background: rgb(0 0 0 / 40%); }
.class-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: -24px; padding: 8px 0; background: var(--panel-bg, #fff); z-index: 1; }
.class-dialog-heading h2 { margin: 0; }
.class-inline-form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.class-inline-form .booking-field { flex: 1 1 200px; }
.class-roster-dialog button, #classOperations button { min-height: 44px; }
.class-roster-dialog .primary-btn, #classOperations .primary-btn { max-width: 100%; white-space: normal; }
.class-roster-dialog .ghost-btn, #classOperations .ghost-btn { padding: 8px 12px; border: 1px solid var(--border, #d6d9dd); border-radius: 6px; font: inherit; color: inherit; background: transparent; cursor: pointer; }
.class-roster-dialog .ghost-btn:hover, #classOperations .ghost-btn:hover { background: var(--surface-muted, #f3f4f6); }
.class-roster-dialog input[type="number"], #classOperations input[type="number"], #classOperations input[type="time"] { box-sizing: border-box; min-height: 44px; width: 100%; padding: 8px 10px; border: 1px solid var(--border, #d6d9dd); border-radius: 6px; background: var(--panel-bg, #fff); color: inherit; font: inherit; }
.class-roster-dialog button { overflow-wrap: anywhere; }
#classActionReview { border: 1px solid var(--border, #d6d9dd); padding: 16px; margin: 16px 0; }
.class-readiness { display: grid; gap: 12px; margin: 18px 0 22px; padding: 16px; border: 1px solid var(--border, #d6d9dd); border-radius: 9px; background: var(--panel-bg, #fff); }
.class-readiness > .panel-title-row { align-items: flex-start; }
.class-readiness h3 { margin: 0 0 4px; }
.class-readiness-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--text-muted, #6b7280); font-size: .82rem; }
.class-readiness-summary strong { color: var(--text, #1f2937); font-size: .95rem; }
.class-readiness-row { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border, #d6d9dd); border-radius: 8px; background: var(--panel-bg, #fff); }
.class-readiness-row.is-blocked { border-color: color-mix(in srgb, var(--amber, #a16207) 42%, var(--border, #d6d9dd)); }
.class-readiness-row.is-ready { border-color: color-mix(in srgb, var(--green, #356e55) 42%, var(--border, #d6d9dd)); }
.class-readiness-state { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--border, #d6d9dd); border-radius: 999px; color: var(--text-muted, #6b7280); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.class-readiness-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; color: var(--text-muted, #6b7280); font-size: .78rem; }
.class-readiness-blockers { display: grid; gap: 4px; margin: 0; padding-left: 20px; color: var(--text-muted, #6b7280); font-size: .8rem; line-height: 1.45; }
.class-readiness-ok { margin: 0; color: var(--green, #356e55); font-size: .8rem; }
.class-readiness-unavailable { display: grid; gap: 4px; padding: 14px; border-left: 3px solid var(--amber, #a16207); background: var(--surface-muted, #f3f4f6); color: var(--text-muted, #6b7280); font-size: .82rem; }
.class-readiness-unavailable strong { color: var(--text, #1f2937); }
@media (max-width: 600px) {
  .class-occurrence, .class-roster-person { align-items: stretch; flex-direction: column; }
  .class-roster-dialog { padding: 16px; }
  .class-dialog-heading { align-items: start; top: -16px; }
  .class-readiness-summary { align-items: flex-start; flex-direction: column; }
  .class-readiness-row .panel-title-row { display: grid; gap: 10px; }
  .class-readiness-state { justify-self: start; }
  .class-readiness-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-attendance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-attendance-review > .panel-title-row { display: grid; gap: 10px; }
  .class-attendance-review > .panel-title-row > strong { text-align: left; }
}
.booking-working-window { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 16px; }
.booking-working-window label { display: flex; flex-direction: column; gap: 6px; }
.booking-working-window input,
.booking-working-window select { min-height: 44px; font: inherit; color: inherit; background: var(--panel-bg, #fff); border: 1px solid var(--border, #e5e7eb); padding: 8px; border-radius: 6px; }
.booking-shell .setting-block a { text-decoration: none; }

/* ---- Service publication readiness ---- */
.service-readiness-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--text-muted, #6b7280);
  font-size: .82rem;
}
.service-readiness-summary strong { color: var(--text, #1f2937); font-size: .95rem; }
.service-readiness-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  margin-top: 12px;
  border: 1px solid var(--border, #d6d9dd);
  border-radius: 9px;
  background: var(--panel-bg, #fff);
}
.service-readiness-card.is-blocked { border-color: color-mix(in srgb, var(--amber, #a16207) 42%, var(--border, #d6d9dd)); }
.service-readiness-card.is-ready { border-color: color-mix(in srgb, var(--green, #356e55) 42%, var(--border, #d6d9dd)); }
.service-readiness-card .panel-title-row { align-items: flex-start; }
.service-readiness-card h3 { margin: 0 0 4px; }
.service-readiness-state {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--border, #d6d9dd);
  border-radius: 999px;
  color: var(--text-muted, #6b7280);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.service-readiness-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; color: var(--text-muted, #6b7280); font-size: .8rem; }
.service-readiness-blockers { display: grid; gap: 4px; margin: 0; padding-left: 20px; color: var(--text-muted, #6b7280); font-size: .82rem; line-height: 1.45; }
.service-readiness-ok { margin: 0; color: var(--green, #356e55); font-size: .82rem; }
.service-readiness-unavailable { display: grid; gap: 4px; padding: 14px; border-left: 3px solid var(--amber, #a16207); background: var(--surface-muted, #f3f4f6); color: var(--text-muted, #6b7280); font-size: .82rem; }
.service-readiness-unavailable strong { color: var(--text, #1f2937); }
@media (max-width: 600px) {
  .service-readiness-summary { align-items: flex-start; flex-direction: column; }
  .service-readiness-card .panel-title-row { display: grid; gap: 10px; }
  .service-readiness-state { justify-self: start; }
  .service-readiness-checks { grid-template-columns: 1fr; }
}

/* ---- Booking payment ---- */
.booking-payment {
  margin-top: 6px;
  padding: 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--panel-bg-sunken, #f8fafc);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.booking-payment h3 { margin: 0; font-size: 1rem; }
.booking-payment .panel-title-row { gap: 8px; }
.booking-card .StripeElement {
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
}

/* ---- Forms Builder ---- */
.forms-shell { display: flex; flex-direction: column; gap: var(--panel-gap, 20px); }
.forms-readiness-panel { overflow: hidden; }
.forms-readiness-boundary { margin: 14px 0; padding: 11px 13px; border-left: 3px solid var(--blue, #5f7f96); background: rgba(95,127,150,.08); color: var(--text); font-size: 12px; line-height: 1.45; }
.forms-readiness-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.forms-readiness-summary > div { min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-bg-sunken, #f8fafc); }
.forms-readiness-summary span, .forms-readiness-summary strong { display: block; }
.forms-readiness-summary span { color: var(--muted); font-size: 11px; }
.forms-readiness-summary strong { margin-top: 4px; color: var(--ink); font-size: 20px; font-variant-numeric: tabular-nums; }
.forms-readiness-panel .data-table { min-width: 680px; }
.forms-readiness-panel .data-table td, .forms-readiness-panel .data-table th { vertical-align: top; }
.membership-manager { min-width: 0; width: 100%; }
.membership-manager .forms-field-row > * { min-width: 0; }
.membership-manager input, .membership-manager select { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 720px) { .membership-manager .forms-field-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .forms-readiness-summary { grid-template-columns: 1fr; } }
.package-entitlements-scroll { max-width: 100%; overflow-x: auto; }
.package-credit-editor { min-width: 0; overflow-wrap: anywhere; }
.package-credit-editor fieldset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; border: 0; padding: 0; margin: 0; }
.package-credit-editor label { display: grid; gap: 6px; min-width: 0; }
.package-credit-editor input, .package-credit-editor select { min-width: 0; max-width: 100%; box-sizing: border-box; }
.package-credit-editor .credit-rule-toggle { display: flex; align-items: flex-start; gap: 8px; }
.package-credit-editor .credit-rule-toggle input { flex: 0 0 auto; width: auto; margin: 3px 0 0; }
.forms-editor { display: flex; flex-direction: column; gap: 12px; }
.forms-editor-title-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.forms-editor-title-row > span { font-size: 0.9rem; font-weight: 600; }
.forms-editor-toggles { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.forms-page-heading, .forms-page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.forms-page-heading .muted { margin: 4px 0 0; }
.forms-section-label { font-size: 0.9rem; font-weight: 700; }
.forms-page-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.forms-page-tabs button { flex: 0 0 auto; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; background: var(--panel-bg, #fff); color: var(--text, #0f0f0f); padding: 7px 10px; font: inherit; font-size: 0.9rem; cursor: pointer; }
.forms-page-tabs button.active { border-color: var(--primary, #1d4f6e); background: var(--primary, #1d4f6e); color: #fff; }
.forms-page-editor { border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 12px; background: color-mix(in srgb, var(--panel-bg, #fff) 96%, var(--primary, #1d4f6e)); }
.forms-page-title-row label { display: grid; gap: 6px; flex: 1 1 280px; font-size: 0.85rem; font-weight: 600; }
.forms-page-title-row input { width: 100%; box-sizing: border-box; }
.forms-field-card { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; }
.forms-field-list { display: flex; flex-direction: column; gap: 8px; }
.forms-field-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr auto;
  gap: 8px;
  align-items: center;
}
@media (max-width: 720px) {
  .forms-field-row { grid-template-columns: 1fr 1fr; }
}
.forms-field-row input,
.forms-field-row select,
.forms-field-details textarea {
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--panel-bg, #fff);
  color: var(--text, #0f0f0f);
  font: inherit;
}
.forms-field-row .ghost-btn { white-space: nowrap; }
.forms-field-row label { display: grid; gap: 5px; min-width: 0; font-size: 0.8rem; font-weight: 600; }
.forms-mapping-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.forms-field-details { display: grid; grid-template-columns: repeat(2, max-content) minmax(220px, 1fr); gap: 9px 16px; align-items: start; margin-top: 10px; }
.forms-field-options-label { display: grid; gap: 5px; min-width: 0; font-size: 0.8rem; font-weight: 600; }
.forms-field-options-label textarea { min-height: 54px; width: 100%; box-sizing: border-box; resize: vertical; }
@media (max-width: 720px) {
  .forms-page-heading, .forms-page-title-row { align-items: stretch; flex-direction: column; }
  .forms-page-heading > button, .forms-page-title-row > button { align-self: flex-start; }
  .forms-field-details { grid-template-columns: 1fr; }
}
.forms-shell .data-table-panel { padding: 14px; }

/* ---- Point of Sale ---- */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pos-card {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px; padding: 12px;
  background: var(--panel-bg, #fff);
}
.pos-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pos-card-title { font-weight: 600; line-height: 1.25; }
.pos-price { font-size: 1.1rem; font-weight: 700; }
.pos-card-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.pos-cart { display: flex; flex-direction: column; gap: 12px; }
.pos-cart .data-table { width: 100%; }
.pos-cart tfoot td { font-weight: 700; padding-top: 10px; border-top: 2px solid var(--border, #e5e7eb); }
.pos-low-stock-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pos-low-stock-form label { display: grid; gap: 5px; min-width: min(260px, 100%); font-size: 0.85rem; font-weight: 600; }
.pos-low-stock-form input { width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; background: var(--panel-bg, #fff); color: var(--text, #0f0f0f); font: inherit; }
.pos-low-stock-section .data-table { width: 100%; margin-top: 12px; }
.pos-inventory-readiness-section { overflow: hidden; }
.pos-inventory-readiness-section .panel-title-row { align-items: flex-start; }
.pos-inventory-readiness-section .panel-title-row > div { min-width: 0; }
.pos-inventory-readiness-section .eyebrow { margin: 0 0 4px; }
.pos-inventory-readiness-section h2, .pos-inventory-readiness-section h3 { margin: 0 0 5px; }
.pos-inventory-readiness-section .panel-title-row p:not(.eyebrow) { max-width: 66ch; margin: 0; color: var(--muted, #6b7280); line-height: 1.5; }
.pos-inventory-readiness-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin: 16px 0; }
.pos-inventory-readiness-summary > div, .pos-inventory-readiness-card { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--border, #d6d9dd); border-radius: 8px; background: var(--panel-bg, #fff); }
.pos-inventory-readiness-summary strong { font-size: 1.05rem; color: var(--text, #1f2937); }
.pos-inventory-readiness-summary span, .pos-inventory-readiness-card p, .pos-inventory-readiness-exception span { color: var(--muted, #6b7280); font-size: .78rem; line-height: 1.45; }
.pos-inventory-readiness-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pos-inventory-readiness-card h3, .pos-inventory-readiness-exceptions h3 { font-size: .9rem; }
.pos-inventory-readiness-card p { margin: 0; }
.pos-inventory-readiness-exceptions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border, #d6d9dd); }
.pos-inventory-readiness-exceptions ul { display: grid; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; }
.pos-inventory-readiness-exception { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 11px; border-left: 3px solid var(--warning, #a16207); background: color-mix(in srgb, var(--warning, #a16207) 7%, var(--panel-bg, #fff)); }
.pos-inventory-readiness-exception strong, .pos-inventory-readiness-exception span { min-width: 0; overflow-wrap: anywhere; }
.pos-inventory-readiness-exception strong { color: var(--text, #1f2937); font-size: .8rem; }
.pos-inventory-readiness-unavailable { display: grid; gap: 4px; padding: 14px; border: 1px solid color-mix(in srgb, var(--warning, #a16207) 30%, var(--border, #d6d9dd)); border-radius: 8px; color: var(--muted, #6b7280); background: color-mix(in srgb, var(--warning, #a16207) 7%, var(--panel-bg, #fff)); font-size: .82rem; line-height: 1.45; }
.pos-inventory-readiness-unavailable strong { color: var(--text, #1f2937); }
.pos-receiving-section { overflow: hidden; }
.pos-receiving-section .panel-title-row { align-items: flex-start; }
.pos-receiving-section .panel-title-row > div { min-width: 0; }
.pos-receiving-section .eyebrow { margin: 0 0 4px; }
.pos-receiving-section h2, .pos-receiving-section h3 { margin: 0 0 5px; }
.pos-receiving-section .panel-title-row p:not(.eyebrow) { max-width: 66ch; margin: 0; color: var(--muted, #6b7280); line-height: 1.5; }
.pos-receiving-readonly { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 9px; border: 1px solid var(--border, #d6d9dd); border-radius: 999px; color: var(--muted, #6b7280); font-size: .75rem; white-space: nowrap; }
.pos-receiving-readonly i { width: 14px; }
.pos-receiving-notice { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--accent, #536779) 28%, var(--border, #d6d9dd)); border-radius: 9px; color: var(--muted, #6b7280); background: color-mix(in srgb, var(--accent, #536779) 6%, var(--panel-bg, #fff)); font-size: .82rem; line-height: 1.45; }
.pos-receiving-notice i { width: 16px; flex: 0 0 auto; margin-top: 1px; }
.pos-receiving-orders { width: 100%; margin-top: 4px; }
.pos-receiving-orders tr.is-selected { background: color-mix(in srgb, var(--accent, #536779) 7%, var(--panel-bg, #fff)); }
.pos-receiving-empty { display: grid; gap: 4px; padding: 18px 0; color: var(--muted, #6b7280); }
.pos-receiving-empty strong { color: var(--text, #1f2937); }
.pos-receiving-detail { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border, #d6d9dd); }
.pos-receiving-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.pos-receiving-detail-head h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pos-receiving-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 14px 0; }
.pos-receiving-summary > div { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--border, #d6d9dd); border-radius: 8px; }
.pos-receiving-summary strong { font-size: 1.05rem; color: var(--text, #1f2937); }
.pos-receiving-summary span { color: var(--muted, #6b7280); font-size: .76rem; }
.pos-receiving-policy-warning { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--warning, #a16207) 30%, var(--border, #d6d9dd)); border-radius: 8px; color: var(--muted, #6b7280); background: color-mix(in srgb, var(--warning, #a16207) 7%, var(--panel-bg, #fff)); font-size: .82rem; line-height: 1.45; }
.pos-receiving-policy-warning i { width: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--warning, #a16207); }
.pos-receiving-lines { width: 100%; margin: 14px 0 24px; }
.pos-receipt-list { margin-top: 20px; }
.pos-receipt-list .panel-title-row { margin-bottom: 10px; }
.pos-receipt-editor { padding-top: 2px; }
.pos-receipt-form { display: grid; gap: 16px; margin-top: 16px; }
.pos-receipt-form > label { display: grid; gap: 6px; font-size: .84rem; font-weight: 600; }
.pos-receipt-form textarea { width: 100%; min-height: 72px; padding: 9px 10px; border: 1px solid var(--border, #d6d9dd); border-radius: 6px; background: var(--panel-bg, #fff); color: var(--text, #0f0f0f); font: inherit; resize: vertical; }
.pos-receipt-inputs { display: grid; gap: 8px; }
.pos-receipt-inputs > p { margin: 0 0 2px; }
.pos-receipt-inputs > label { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border, #d6d9dd); font-size: .84rem; }
.pos-receipt-inputs > label > span { display: grid; gap: 2px; min-width: 0; }
.pos-receipt-inputs small { color: var(--muted, #6b7280); font-size: .74rem; font-weight: 400; }
.pos-receipt-inputs input { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--border, #d6d9dd); border-radius: 6px; background: var(--panel-bg, #fff); color: var(--text, #0f0f0f); font: inherit; }
.pos-receipt-finalization { display: grid; gap: 14px; padding-top: 2px; }
.pos-receipt-finalization .panel-title-row { align-items: flex-start; }
.pos-receipt-finalization-form { display: grid; gap: 14px; max-width: 680px; }
.pos-receipt-finalization-form > label:not(.pos-receipt-finalization-check) { display: grid; gap: 6px; font-size: .84rem; font-weight: 600; }
.pos-receipt-finalization-form input:not([type="checkbox"]) { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--border, #d6d9dd); border-radius: 6px; background: var(--panel-bg, #fff); color: var(--text, #0f0f0f); font: inherit; }
.pos-receipt-finalization-check { display: flex; align-items: flex-start; gap: 8px; color: var(--text, #1f2937); font-size: .84rem; line-height: 1.45; }
.pos-receipt-finalization-check input { flex: 0 0 auto; margin-top: 3px; }
.pos-inventory-adjustment-section { overflow: hidden; }
.pos-inventory-adjustment-section .panel-title-row { align-items: flex-start; }
.pos-inventory-adjustment-section .panel-title-row > div { min-width: 0; }
.pos-inventory-adjustment-section .eyebrow { margin: 0 0 4px; }
.pos-inventory-adjustment-section h2 { margin: 0 0 5px; }
.pos-inventory-adjustment-section .panel-title-row p:not(.eyebrow) { max-width: 66ch; margin: 0; color: var(--muted, #6b7280); line-height: 1.5; }
.pos-inventory-adjustment-notice { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--accent, #536779) 28%, var(--border, #d6d9dd)); border-radius: 9px; color: var(--muted, #6b7280); background: color-mix(in srgb, var(--accent, #536779) 6%, var(--panel-bg, #fff)); font-size: .82rem; line-height: 1.45; }
.pos-inventory-adjustment-notice i { width: 16px; flex: 0 0 auto; margin-top: 1px; }
.pos-inventory-adjustment-form { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(130px, .7fr) minmax(150px, .8fr); gap: 12px; margin: 16px 0 20px; padding: 14px; border: 1px solid var(--border, #d6d9dd); border-radius: 9px; background: color-mix(in srgb, var(--panel-bg, #fff) 94%, var(--accent, #536779)); }
.pos-inventory-adjustment-form > div { min-width: 0; }
.pos-inventory-adjustment-form label { display: grid; gap: 6px; color: var(--text, #1f2937); font-size: .78rem; font-weight: 700; }
.pos-inventory-adjustment-form input, .pos-inventory-adjustment-form select { width: 100%; min-height: 38px; padding: 8px 9px; border: 1px solid var(--border, #d6d9dd); border-radius: 6px; background: var(--panel-bg, #fff); color: var(--text, #0f0f0f); font: inherit; }
.pos-inventory-adjustment-form-wide { grid-column: 1 / -1; }
.pos-inventory-adjustment-form .form-actions { grid-column: 1 / -1; margin-top: 0; }
.pos-inventory-adjustment-table { width: 100%; }
.pos-inventory-adjustment-table td, .pos-inventory-adjustment-table th { vertical-align: top; }
.pos-inventory-adjustment-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pos-inventory-adjustment-permission { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0; padding: 12px 13px; border: 1px solid var(--border, #d6d9dd); border-radius: 8px; color: var(--muted, #6b7280); font-size: .82rem; line-height: 1.45; }
.pos-inventory-adjustment-permission i { width: 16px; flex: 0 0 auto; }
.pos-inventory-adjustment-unavailable { display: grid; gap: 4px; padding: 14px; border: 1px solid color-mix(in srgb, var(--warning, #a16207) 30%, var(--border, #d6d9dd)); border-radius: 8px; color: var(--muted, #6b7280); background: color-mix(in srgb, var(--warning, #a16207) 7%, var(--panel-bg, #fff)); font-size: .82rem; line-height: 1.45; }
.pos-inventory-adjustment-unavailable strong { color: var(--text, #1f2937); }
@media (max-width: 680px) {
  .pos-inventory-readiness-section .panel-title-row, .pos-receiving-section .panel-title-row, .pos-inventory-adjustment-section .panel-title-row, .pos-receiving-detail-head { display: grid; gap: 10px; }
  .pos-inventory-readiness-exception { display: grid; gap: 3px; }
  .pos-receiving-readonly { justify-self: start; }
  .pos-receiving-summary { grid-template-columns: 1fr; }
  .pos-receiving-orders th:nth-child(2), .pos-receiving-orders td:nth-child(2) { display: none; }
  .pos-inventory-adjustment-form { grid-template-columns: 1fr; }
  .pos-inventory-adjustment-form-wide, .pos-inventory-adjustment-form .form-actions { grid-column: auto; }
}
.small { font-size: 0.82rem; }
.link-btn { background: none; border: none; color: var(--accent, #2b6bf3); cursor: pointer; font: inherit; padding: 0 2px; }
/* POS inline actions are often used on a phone at the front desk. Keep the
   quiet visual treatment while preserving a 44px keyboard/touch target. */
.pos-grid .link-btn,
.pos-cart .link-btn,
.pos-receiving-section .link-btn {
  min-height: 44px;
  padding-inline: 8px;
}

/* The POS readiness panel is deliberately informative rather than
   interactive: unsupported money paths must be visible without looking like
   selectable checkout controls. */
.pos-capability-panel {
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel-bg, #fff) 94%, var(--accent, #3d4a58)), var(--panel-bg, #fff));
}
.pos-capability-panel .panel-title-row { align-items: flex-start; }
.pos-capability-panel .panel-title-row > div { min-width: 0; }
.pos-capability-panel .eyebrow { margin: 0 0 4px; }
.pos-capability-panel h2 { margin: 0 0 5px; }
.pos-capability-panel .panel-title-row p:not(.eyebrow) { max-width: 62ch; margin: 0; color: var(--muted, #6b7280); line-height: 1.5; }
.pos-capability-readonly { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 9px; border: 1px solid var(--border, #d6d9dd); border-radius: 999px; color: var(--muted, #6b7280); font-size: .75rem; white-space: nowrap; }
.pos-capability-readonly i { width: 14px; }
.pos-capability-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.pos-capability-state { display: grid; gap: 5px; min-width: 0; padding: 14px; border: 1px solid var(--border, #d6d9dd); border-radius: 9px; background: color-mix(in srgb, var(--panel-bg, #fff) 92%, transparent); }
.pos-capability-state strong { color: var(--text, #1f2937); font-size: .96rem; }
.pos-capability-state > span:last-child { color: var(--muted, #6b7280); font-size: .8rem; line-height: 1.45; }
.pos-capability-state-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted, #6b7280); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pos-capability-state-label i { width: 15px; }
.pos-capability-state.is-supported { border-color: color-mix(in srgb, var(--green, #356e55) 34%, var(--border, #d6d9dd)); background: color-mix(in srgb, var(--green, #356e55) 7%, var(--panel-bg, #fff)); }
.pos-capability-state.is-supported .pos-capability-state-label { color: var(--green, #356e55); }
.pos-capability-state.is-unavailable .pos-capability-state-label { color: var(--muted, #6b7280); }
.pos-capability-list { display: grid; gap: 0; margin-top: 14px; border-top: 1px solid var(--border, #d6d9dd); }
.pos-capability-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 11px 0; border-bottom: 1px solid var(--border, #d6d9dd); }
.pos-capability-row-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--muted, #6b7280); background: color-mix(in srgb, var(--muted, #6b7280) 12%, transparent); }
.pos-capability-row-icon i { width: 15px; }
.pos-capability-row-copy { display: grid; gap: 2px; min-width: 0; }
.pos-capability-row-copy strong { color: var(--text, #1f2937); font-size: .84rem; }
.pos-capability-row-copy span { color: var(--muted, #6b7280); font-size: .78rem; line-height: 1.4; }
.pos-capability-status { padding: 4px 7px; border: 1px solid var(--border, #d6d9dd); border-radius: 999px; color: var(--muted, #6b7280); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pos-checkout-blockers { display: grid; gap: 8px; margin-top: 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--muted, #6b7280) 24%, var(--border, #d6d9dd)); border-radius: 9px; background: color-mix(in srgb, var(--muted, #6b7280) 5%, var(--panel-bg, #fff)); }
.pos-checkout-blockers .eyebrow { margin: 0; color: var(--muted, #6b7280); }
.pos-checkout-blockers ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pos-checkout-blockers li { display: grid; grid-template-columns: minmax(90px, .35fr) minmax(0, 1fr); gap: 10px; color: var(--muted, #6b7280); font-size: .78rem; line-height: 1.4; }
.pos-checkout-blockers li strong { color: var(--text, #1f2937); font-size: .74rem; text-transform: capitalize; }
.pos-checkout-blockers li span { min-width: 0; }
.pos-checkout-blockers .small { margin: 0; }
@media (max-width: 640px) {
  .pos-capability-panel .panel-title-row { display: grid; gap: 10px; }
  .pos-capability-readonly { justify-self: start; }
  .pos-capability-summary { grid-template-columns: 1fr; }
  .pos-capability-row { grid-template-columns: auto minmax(0, 1fr); }
  .pos-capability-status { grid-column: 2; justify-self: start; }
  .pos-checkout-blockers li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- Memberships ---- */
#memEntitlements h3 { margin: 10px 0 6px; }
#memEntitlements h4 { margin: 14px 0 6px; color: var(--text, #0f0f0f); font-size: 0.95rem; }
#memEntitlements .data-table { width: 100%; }
.consent-history-panel { margin-top: 16px; }
.consent-history-list { display: grid; gap: 10px; }
.consent-history-card { padding: 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: var(--panel-bg-sunken, #f8fafc); }
.consent-history-card .panel-title-row { align-items: center; gap: 10px; }
.consent-history-card h4 { margin: 0; }
.consent-history-details { display: grid; grid-template-columns: minmax(100px, auto) minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 0; overflow-wrap: anywhere; }
.consent-history-details dt { color: var(--muted, #6b7280); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.consent-history-details dd { margin: 0; }


/* ------------------------------------------------------------------ Phones */
/* The validated status pair, declared once so the HTML legend and the canvas
   bars cannot drift apart. Light and dark are separate steps, not a flip:
   light #0d9488/#bf4f28, dark #14a89a/#e0663c -- both pass the lightness band,
   chroma floor, CVD separation, normal-vision floor and contrast checks. */
.phones-shell {
  --call-answered: #0d9488;
  --call-missed: #bf4f28;
}
html[data-theme="dark"] .phones-shell {
  --call-answered: #14a89a;
  --call-missed: #e0663c;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .phones-shell {
    --call-answered: #14a89a;
    --call-missed: #e0663c;
  }
}

.phones-intro { margin-bottom: 1.5rem; }
.phones-intro h2 { margin: 0 0 0.35rem; }
.phones-intro p { margin: 0; color: var(--muted); max-width: 60ch; }

/* A quiet rule that opens each block, matching the analytics section bands. */
.phones-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line-strong);
}
.phones-band h3 { margin: 0; font-size: 1rem; }
.phones-range { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.phones-office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}
.phones-office-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.phones-office-head h3 { margin: 0; font-size: 1rem; }
/* State is never colour alone -- each carries an icon and the word. */
.phones-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.phones-state i,
.phones-state [data-lucide] { width: 15px; height: 15px; }
.phones-state.is-on { color: var(--call-missed); }
.phones-state.is-off { color: var(--muted); }
.phones-current { margin: 0.5rem 0 0; font-size: 0.9rem; }
.phones-schedule { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--muted); }
.phones-actions { margin-top: 0.85rem; }

.phones-tiles { margin-bottom: 0.25rem; }
.phone-tile-note {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.phones-chart-panel { margin-top: 1rem; }
/* The finding, stated in words above the chart, so the point does not depend on
   the reader interpreting the bars correctly. */
.phones-finding {
  margin: 0.15rem 0 0.9rem;
  font-size: 0.9rem;
  color: var(--text);
  max-width: 62ch;
}
.phones-legend {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.phones-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.phones-legend .swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
}
.swatch-answered { background: var(--call-answered); }
.swatch-missed { background: var(--call-missed); }

/* Outcome carries the word; colour is the second signal, never the only one. */
.phones-outcome { font-weight: 600; }
.phones-outcome.is-answered { color: var(--call-answered); }
.phones-outcome.is-missed { color: var(--call-missed); }
.phones-table td { font-variant-numeric: tabular-nums; }

.phones-capabilities ul { margin: 0; padding-left: 1.1rem; }
.phones-capabilities li { margin-bottom: 0.5rem; line-height: 1.5; }
.phones-capabilities li:last-child { margin-bottom: 0; }

/* Phone routing is an operational form, deliberately separate from analytics. */
.phone-routing-shell { max-width: 52rem; }
.phone-routing-panel { display: grid; gap: 1rem; }
.phone-route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.85rem;
}
.phone-mode-list {
  display: grid;
  gap: 0.7rem;
}
.phone-mode-card {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  min-height: 44px;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.6rem;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.phone-mode-card:hover { border-color: var(--accent, var(--line-strong)); }
.phone-mode-card.is-selected { border-color: var(--accent, var(--line-strong)); box-shadow: inset 0 0 0 1px var(--accent, var(--line-strong)); }
.phone-mode-card input { width: 1.1rem; height: 1.1rem; margin: 0.15rem 0 0; accent-color: var(--accent, currentColor); }
.phone-mode-card:has(input:focus-visible) { outline: 2px solid var(--accent, var(--text)); outline-offset: 2px; }
.phone-mode-card-copy { display: grid; gap: 0.24rem; }
.phone-mode-card-copy small,
.phone-routing-note { color: var(--muted); line-height: 1.45; }
.phone-routing-state { margin: 0; }
.phone-routing-note { margin: 0; font-size: 0.9rem; }
.phone-route-control {
  display: grid;
  gap: 0.42rem;
  color: var(--text);
  font-weight: 650;
}
.phone-route-control small {
  color: var(--muted);
  font-weight: 500;
}
.phone-route-control select,
.phone-route-control input {
  min-height: 2.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.55rem;
  background: var(--surface);
  color: var(--text);
  padding: 0 0.7rem;
  font: inherit;
}
.phone-route-time { max-width: 18rem; }
.phone-routing-actions { display: flex; justify-content: flex-end; }
.phone-schedule-band { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.phone-schedule-drawer-open { overflow: hidden; }
.phone-schedule-drawer-overlay { position: fixed; z-index: 100; inset: 0; display: flex; justify-content: flex-end; }
.phone-schedule-drawer-backdrop { position: absolute; inset: 0; background: rgba(var(--green-900-rgb), .42); backdrop-filter: blur(3px); }
.phone-schedule-drawer { position: relative; z-index: 1; width: min(480px, 100vw); height: 100%; display: flex; flex-direction: column; border-left: 1px solid var(--line-strong); background: var(--paper); box-shadow: -18px 0 44px rgba(var(--green-900-rgb), .2); animation: phone-schedule-drawer-in .18s ease-out; }
.phone-schedule-drawer > header { flex: 0 0 auto; min-height: 76px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.phone-schedule-drawer header .eyebrow { margin: 0 0 3px; }
.phone-schedule-drawer header h2 { margin: 0; color: var(--ink); font-size: 20px; }
.phone-schedule-drawer form { min-height: 0; flex: 1 1 auto; overflow-y: auto; display: grid; align-content: start; gap: 16px; padding: 20px; }
.phone-schedule-drawer form > .muted { margin: 0; line-height: 1.45; }
.phone-schedule-drawer-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
@keyframes phone-schedule-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (max-width: 640px) { .phone-schedule-drawer { width: 100vw; } }
.phone-schedule-list {
  display: grid;
  gap: 0.7rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.phone-schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}
.phone-schedule-row:last-child { border-bottom: 0; padding-bottom: 0; }
.phone-schedule-row span { display: grid; gap: 0.22rem; }
.phone-schedule-row small,
.phone-schedule-empty { color: var(--muted); }

/* The one-move control: "this office is closed today". Sits above the per-office
   cards because it is the coarser, more common decision. */
.phones-consolidate { margin-bottom: 1rem; }
.phones-consolidate-state {
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.phones-consolidate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ------------------------------------------------- Dashboard Tabs settings */
/* Same shape as the Tech Support ticket list: grip left, body middle, control
   right -- so the portal's two reorderable lists are recognisably one product. */
.tab-card-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0 1.25rem; }

.tab-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--white);
}
.tab-card.is-dragging { opacity: 0.45; }
/* The drop line lands on the edge you are nearer, like the tickets list. */
.tab-card.drop-before { box-shadow: inset 0 3px 0 0 var(--green-800, var(--green-800, var(--green-800, var(--green-800, var(--accent, var(--text)))))); }
.tab-card.drop-after { box-shadow: inset 0 -3px 0 0 var(--green-800, var(--green-800, var(--green-800, var(--green-800, var(--accent, var(--text)))))); }
.tab-card.drop-inside { outline: 2px solid var(--green-800); outline-offset: 2px; background: var(--sage-100); }

.tab-rank {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
}
.tab-rank-number { font-size: 0.8rem; font-variant-numeric: tabular-nums; min-width: 1.1rem; }
.tab-drag-handle {
  display: inline-flex;
  cursor: grab;
  border-radius: 4px;
  padding: 2px;
}
.tab-drag-handle:hover { color: var(--text); }
.tab-drag-handle:focus-visible { outline: 2px solid var(--green-800, var(--green-800, var(--green-800, var(--green-800, var(--accent, var(--text)))))); outline-offset: 1px; }
.tab-card.is-dragging .tab-drag-handle { cursor: grabbing; }

.tab-card-body { min-width: 0; display: grid; gap: 0.55rem; }
.tab-card-head { display: flex; align-items: center; gap: 0.5rem; }
.tab-card-head h3 { margin: 0; font-size: 0.95rem; }
.tab-card-head i,
.tab-card-head [data-lucide] { width: 16px; height: 16px; color: var(--muted); }
.tab-card-desc, .tab-card-note {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.tab-settings-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0.85rem 0 -0.35rem;
}

.tab-folder-card {
  border-style: dashed;
  background: color-mix(in srgb, var(--sage-100) 54%, var(--white));
}

.tab-folder-card .tab-card-head input { width: min(100%, 22rem); border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; font: inherit; font-weight: 700; padding: 0.18rem 0; }
.tab-folder-card .tab-card-head input:focus { outline: 0; border-bottom-color: var(--green-800); }
.tab-folder-card-options { display: flex; align-items: center; gap: 0.85rem; color: var(--muted); font-size: 0.8rem; }
.tab-folder-card-options label { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; }
.tab-folder-card-options select { min-width: 8rem; }
.tab-folder-drop-hint { font-style: italic; }
.tab-folder-member { margin-left: 1.35rem; border-left: 3px solid var(--sage-300); }
.tab-root-dropzone { margin: 0.2rem 0; padding: 0.75rem; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); text-align: center; font-size: 0.84rem; }
.tab-root-dropzone.is-drop-target { border-color: var(--green-800); background: var(--sage-100); color: var(--green-900); }

@media (max-width: 560px) {
  .tab-card { grid-template-columns: auto minmax(0, 1fr); }
  .tab-card-actions { grid-column: 2; justify-self: start; }
  .tab-settings-toolbar .secondary-btn { width: 100%; justify-content: center; }
  .tab-folder-card-options { align-items: flex-start; flex-direction: column; gap: 0.4rem; }
}

/* The switch. A real checkbox underneath, so it keeps native keyboard and
   screen-reader behaviour; the visible track is what carries the brand. */
.portal-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.portal-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.portal-switch-track {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  transition: background 140ms ease;
}
.portal-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 140ms ease;
}
.portal-switch input:checked + .portal-switch-track { background: var(--green-800, var(--green-800, var(--green-800, var(--green-800, var(--accent, var(--ink)))))); }
.portal-switch input:checked + .portal-switch-track::after { transform: translateX(18px); }
/* Hiding an input usually hides its focus with it; put the ring on the track. */
.portal-switch input:focus-visible + .portal-switch-track {
  outline: 2px solid var(--green-800, var(--green-800, var(--green-800, var(--green-800, var(--accent, var(--text))))));
  outline-offset: 2px;
}
.portal-switch input:disabled { cursor: default; }
.portal-switch input:disabled + .portal-switch-track { opacity: 0.55; }
.portal-switch input:disabled ~ * { cursor: default; }

/* Status left, primary action right -- "what happened, then what to do". */
.tab-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ------------------------------------------------------------- Tasks board */
/* Proportions from the original board (initial commit): 280px columns and a
   12px gap are what made fourteen lists usable side by side. */
.task-board-shell {
  --board-gap: 12px;
  --board-column-width: 280px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Without this the shell takes its content's width -- thirteen 280px columns
     -- and stretches the page to 4400px instead of letting the scroller below
     do the scrolling. A flex item's min-width defaults to auto, i.e. "never
     shrink below your content". */
  min-width: 0;
  max-width: 100%;
}
/* Controls only -- the page heading above already names this page. */
.task-board-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.task-board-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  /* Without these the toggles push past the panel and "Show done" is clipped
     on any screen under about 1200px. */
  min-width: 0;
  justify-content: flex-end;
}
.task-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

/* Tenant dark themes may intentionally give generic primary buttons dark
   lettering. This action is always a filled task-board call-to-action, so its
   label and plus mark need the same dependable white contrast everywhere. */
.task-title-actions .task-new-btn.primary-btn,
.task-title-actions .task-new-btn.primary-btn :is(i, svg) {
  color: #fff;
}

/* Segmented toggles, the pair the original carried as icon buttons. Words
   rather than icons: "by person" is not a shape anyone recognises. */
.task-toggle {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: var(--control-h);
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  background: var(--paper);
}
.task-toggle button {
  height: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
  border-radius: var(--control-radius);
  padding: 0 16px;
  font: inherit;
  font-size: var(--control-font);
  font-weight: var(--control-weight-strong);
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}
.task-toggle button.is-active {
  background: var(--green-800, var(--ink));
  color: var(--white);
}

@media (min-width: 721px) {
  /* The sort choice and its immediate action are one desktop control group. */
  .task-title-actions > .task-toggle[aria-label="Sort tasks by"],
  .task-title-actions > .task-new-btn.primary-btn {
    height: var(--control-h);
    min-height: var(--control-h);
  }
}

/* Pinned column outside the scroller, so "My Tasks" never slides away. */
.project-board {
  display: flex;
  gap: var(--board-gap);
  align-items: stretch;
  min-height: 0;
  min-width: 0;          /* same reason as the shell above */
  max-width: 100%;
  /* Run to the bottom of the window. The subtraction is the page chrome above
     the board -- header, title and controls. */
  height: calc(100vh - 8rem);
}
/* Sticky, not a separate container: it holds the left edge while the other
   columns scroll underneath, and costs no layout width of its own. */
.project-board-column.is-sticky-column {
  position: sticky;
  left: 0;
  z-index: 3;
  box-shadow: 6px 0 12px -8px rgba(0, 0, 0, 0.28);
}
.project-board-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: var(--board-gap);
  overflow-x: auto;
  padding-bottom: 10px;
  min-width: 0;
  scroll-snap-type: x proximity;
}
.project-board-column {
  flex: 0 0 var(--board-column-width);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--white);
  scroll-snap-align: start;
  overflow: hidden;
}
/* The colour is a rule on the header, not a fill: fourteen filled headers side
   by side is a swatch book, not a board. */
.project-board-column { border-top: 3px solid var(--column-accent, var(--line-strong)); }
.task-colour-lilac { --column-accent: #9a87b0; }
.task-colour-taupe { --column-accent: #a89684; }
.task-colour-blue { --column-accent: #5f7f96; }
.task-colour-amber { --column-accent: #b99a52; }
.task-colour-green { --column-accent: #3f8d79; }
.task-colour-rose { --column-accent: #b5726f; }
.task-colour-charcoal { --column-accent: #6b7280; }
.task-colour-sage { --column-accent: #8ba888; }

.project-board-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--line-strong);
}
.task-column-heading {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.task-column-header-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
}
.project-board-column-title { font-weight: 600; font-size: 0.88rem; }
.task-column-collapse {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.task-column-collapse:hover {
  border-color: var(--line-strong);
  background: var(--paper);
  color: var(--green-900);
}
.task-column-collapse:focus-visible {
  outline: 2px solid var(--green-800);
  outline-offset: 2px;
}
.task-column-collapse i,
.task-column-collapse [data-lucide] { width: 16px; height: 16px; }
.project-board-column-count {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  background: var(--surface-muted, rgba(0,0,0,0.05));
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

/* A collapsed people lane is still board-height on desktop, like a book spine:
   its vertical name identifies it without stealing width from active work. */
@media (min-width: 721px) {
  .project-board-column-header {
    padding-block: 0.6rem;
  }

  .project-board-column.is-person-column.is-collapsed {
    flex-basis: 52px;
    width: 52px;
  }

  .project-board-column.is-person-column.is-collapsed .project-board-column-header {
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 8px;
  }

  .project-board-column.is-person-column.is-collapsed .task-column-heading {
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-start;
  }

  .project-board-column.is-person-column.is-collapsed .task-column-header-actions {
    display: contents;
  }

  .project-board-column.is-person-column.is-collapsed .task-column-collapse {
    order: -1;
  }

  .project-board-column.is-person-column.is-collapsed .project-board-column-title {
    font-size: 0.88rem;
    line-height: 1.2;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
  }

  .project-board-column.is-person-column.is-collapsed .project-board-column-count {
    padding-inline: 0.35rem;
  }
}
.project-board-column-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem;
  overflow-y: auto;
  /* Fill the column rather than stopping at a fixed 62vh, which left the board
     short of the bottom of the window however much room there was. Only the
     individual list scrolls, once it is longer than the board is tall. */
  flex: 1 1 auto;
  min-height: 4rem;
}
.project-board-column-body.is-drop-target {
  background: rgba(var(--green-800-rgb, 36, 87, 68), 0.06);
  outline: 2px dashed var(--green-800, var(--ink));
  outline-offset: -4px;
}

/* Restored lane controls from the original task board. They stay at the
   bottom because the card stack is the flexible part of the column. */
.task-column-edit {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 0.45rem 0.65rem 0.6rem;
  border-top: 1px solid var(--line-strong);
  background: var(--white);
  z-index: 2;
}
.task-column-edit summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}
.task-column-edit-panel { display: grid; gap: 0.4rem; margin-top: 0.45rem; }
.task-column-completed-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}
.task-column-completed-toggle input { accent-color: var(--green-800, #245744); }
.task-column-field { display: grid; gap: 0.2rem; }
.task-column-field span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.task-column-field input,
.task-column-field select {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
}
.task-column-color-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}
.task-column-color-swatch {
  width: 100%;
  min-height: 30px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 7px;
  background: var(--column-accent);
  cursor: pointer;
}
.task-column-color-swatch[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--column-accent);
}
.task-column-edit-form { display: grid; gap: 0.4rem; }
.task-column-edit .wh-select-button {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.7rem;
}
.task-column-edit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.task-column-edit-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  min-height: 30px;
  height: 30px;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 0.7rem;
  cursor: pointer;
}
.task-column-edit-actions svg,
.task-column-edit-actions [data-lucide] { width: 13px; height: 13px; }
.task-column-save { background: var(--paper); color: var(--ink); }
.task-column-save:hover { background: var(--surface-muted, rgba(0,0,0,0.05)); }
.task-column-delete {
  background: #fff1f0;
  color: var(--status-bad, #b3261e);
}
.task-column-delete:hover { background: #ffe8e5; }

.task-detail-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(5, 32, 66, 0.22);
}
.task-detail-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 901;
  display: flex;
  flex-direction: column;
  width: min(430px, 92vw);
  background: var(--white);
  border-left: 1px solid var(--line-strong);
  box-shadow: -10px 0 30px rgba(5, 32, 66, 0.16);
}
.task-detail-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--line-strong);
}
.task-detail-drawer-header h2 { margin: 0.2rem 0 0; font-size: 1.2rem; line-height: 1.3; }
.task-detail-eyebrow {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.task-detail-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.task-detail-close:hover { color: var(--ink); background: var(--paper); }
.task-detail-drawer-body { overflow-y: auto; padding: 1.15rem 1.25rem 2rem; }
.task-detail-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem 1rem;
  margin: 0;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.task-detail-facts div { min-width: 0; }
.task-detail-facts dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.task-detail-facts dd { margin: 0.15rem 0 0; font-size: 0.82rem; overflow-wrap: anywhere; }
.task-detail-section { margin-top: 1.15rem; }
.task-detail-section h3 { margin: 0 0 0.45rem; font-size: 0.9rem; }
.task-detail-description { margin: 0; white-space: pre-wrap; line-height: 1.5; font-size: 0.86rem; }
.task-detail-section textarea { width: 100%; min-height: 130px; resize: vertical; }
.task-detail-section form { display: grid; gap: 0.55rem; }
.task-detail-danger-zone {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.task-detail-danger-zone .danger-btn { width: 100%; }
.task-create-form { display: grid; gap: 0.85rem; }
.task-create-form label { display: grid; gap: 0.3rem; }
.task-create-form label > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.task-create-form input,
.task-create-form select,
.task-create-form textarea {
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
}
.task-create-form textarea { resize: vertical; }
.task-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

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

@media (max-width: 640px) {
  .task-detail-drawer { width: 100vw; }
  .task-detail-facts { grid-template-columns: 1fr; }
}

/* The opt-in mobile app shell keeps each tenant's real tab registry in reach
   without duplicating routes. The shared desktop sidebar remains unchanged for
   tenants that have not enabled this pattern and for larger screens. */
@media (max-width: 720px) {
  body[data-mobile-navigation="bottom"] {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  body[data-mobile-navigation="bottom"].dashboard-body {
    padding-top: 82px;
  }

  body[data-mobile-navigation="bottom"] .mobile-appbar {
    display: block;
    min-height: 82px;
    padding: 19px 18px 15px;
  }

  body[data-mobile-navigation="bottom"] .mobile-title {
    display: block;
  }

  body[data-mobile-navigation="bottom"] .mobile-title strong {
    display: block;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: 500;
    /* The shared title rule clips overflow to ellipsize long labels. Give the
       Georgia line box enough depth that a descender in “Knowledge” remains
       fully visible inside that clipped box. */
    line-height: 1.16;
  }

  body[data-mobile-navigation="bottom"] .mobile-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  body[data-mobile-navigation="bottom"] .mobile-title-row strong {
    min-width: 0;
    flex: 1 1 auto;
  }

  body[data-mobile-navigation="bottom"] .mobile-view-actions {
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
  }

  body[data-mobile-navigation="bottom"] .mobile-view-actions #openEventCreate {
    width: auto;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding-inline: 12px;
    font-size: 13px;
  }

  body[data-mobile-navigation="bottom"] .mobile-view-actions #ticketAdd {
    width: auto;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding-inline: 12px;
    font-size: 13px;
  }

  body[data-mobile-navigation="bottom"] #mobileNavToggle {
    display: none;
  }

  body[data-mobile-navigation="bottom"] .mobile-bottom-nav {
    position: fixed;
    z-index: 44;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: calc(78px + env(safe-area-inset-bottom));
    padding: 3px 10px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--paper);
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    box-shadow: 0 -8px 22px rgba(var(--ink-rgb), 0.08);
    backdrop-filter: blur(14px);
  }

  body[data-mobile-navigation="bottom"] .mobile-bottom-nav-item {
    position: relative;
    display: grid;
    place-items: center;
    gap: 1px;
    min-height: 54px;
    min-width: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
  }

  body[data-mobile-navigation="bottom"] .mobile-bottom-nav-item svg {
    display: block;
    width: 21px;
    height: 21px;
    stroke-width: 2;
    pointer-events: none;
  }

  body[data-mobile-navigation="bottom"] .mobile-bottom-nav-item.active {
    background: var(--green-800);
    color: var(--white);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 16px rgba(var(--ink-rgb), 0.12);
  }

  body[data-mobile-navigation="bottom"] .mobile-bottom-nav-item.active svg {
    fill: rgba(255, 255, 255, 0.1);
  }

  body[data-mobile-navigation="bottom"] .sidebar {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 46;
    width: auto;
    max-height: min(84dvh, 720px);
    height: auto;
    padding: 26px 18px calc(18px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 56px rgba(var(--ink-rgb), 0.22);
    transform: translateY(105%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  body[data-mobile-navigation="bottom"] .event-popout::before,
  body[data-mobile-navigation="bottom"] .link-tree-popout::before,
  body[data-mobile-navigation="bottom"] .task-detail-drawer::before,
  body[data-mobile-navigation="bottom"] .tracking-link-drawer::before,
  body[data-mobile-navigation="bottom"] .newsletter-audience-drawer::before,
  body[data-mobile-navigation="bottom"] .ai-drawer::before {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
    content: "";
    transform: translateX(-50%);
  }

  body[data-mobile-navigation="bottom"].mobile-nav-open .sidebar {
    transform: translateY(0);
  }

  body[data-mobile-navigation="bottom"] .sidebar.mobile-menu-dragging {
    transition: none;
  }

  body[data-mobile-navigation="bottom"] .mobile-menu-sheet-handle {
    display: block;
    position: relative;
    align-self: center;
    flex: 0 0 20px;
    width: 68px;
    margin: -12px 0 -2px;
    touch-action: none;
  }

  body[data-mobile-navigation="bottom"] .mobile-menu-sheet-handle::before {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
    content: "";
    transform: translateX(-50%);
  }

  body[data-mobile-navigation="bottom"] .event-popout,
  body[data-mobile-navigation="bottom"] .event-popout.event-drawer,
  body[data-mobile-navigation="bottom"] .link-tree-popout,
  body[data-mobile-navigation="bottom"] .link-tree-edit-drawer,
  body[data-mobile-navigation="bottom"] .task-detail-drawer,
  body[data-mobile-navigation="bottom"] .support-ticket-sheet,
  body[data-mobile-navigation="bottom"] .tracking-link-drawer,
  body[data-mobile-navigation="bottom"] .newsletter-audience-drawer {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 91;
    width: auto;
    max-width: none;
    max-height: min(88dvh, 760px);
    height: auto;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 56px rgba(var(--ink-rgb), 0.22);
    transform: none;
    animation: mobile-bottom-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
  }

  /* The task backdrop remains at 900. Keep this sheet above it instead of
     inheriting the shared sheet layer (91), which made the whole form look
     dimmed and routed taps to the backdrop. */
  body[data-mobile-navigation="bottom"] .task-detail-drawer {
    z-index: 901;
  }

  body[data-mobile-navigation="bottom"] .support-ticket-sheet-backdrop {
    position: fixed;
    z-index: 900;
    inset: 0;
    background: rgba(var(--ink-rgb), 0.28);
    backdrop-filter: blur(2px);
  }

  body[data-mobile-navigation="bottom"] .support-ticket-sheet {
    position: fixed;
    z-index: 901;
    overflow: hidden;
    /* Keep the form surface opaque. Only the backdrop is meant to reveal the
       task list behind the sheet. */
    background: var(--paper) !important;
    opacity: 1;
  }

  /* The AI drawer stays in the DOM, unlike the rendered-on-demand sheets above. */
  body[data-mobile-navigation="bottom"] .ai-drawer {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 91;
    width: auto;
    max-width: none;
    max-height: min(88dvh, 760px);
    height: auto;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 56px rgba(var(--ink-rgb), 0.22);
    transform: translateY(105%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  body[data-mobile-navigation="bottom"].ai-drawer-open .ai-drawer {
    transform: translateY(0);
    animation: mobile-bottom-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  body[data-mobile-navigation="bottom"] .ai-drawer.ai-drawer-dragging {
    transition: none;
    animation: none;
  }

  body[data-mobile-navigation="bottom"] .event-popout.event-popout-dragging {
    transition: none;
    animation: none;
  }

  body[data-mobile-navigation="bottom"] .support-ticket-sheet.support-ticket-sheet-dragging {
    transition: none;
    animation: none;
  }

  body[data-mobile-navigation="bottom"] .event-popout.event-sheet-closing {
    pointer-events: none;
    animation: mobile-bottom-sheet-out 0.26s cubic-bezier(0.4, 0, 1, 1) forwards;
  }

  body[data-mobile-navigation="bottom"] .event-popout-backdrop.event-sheet-closing {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.24s ease;
  }

  body[data-mobile-navigation="bottom"] .support-ticket-sheet.support-ticket-sheet-closing {
    pointer-events: none;
    animation: mobile-bottom-sheet-out 0.26s cubic-bezier(0.4, 0, 1, 1) forwards;
  }

  body[data-mobile-navigation="bottom"] .support-ticket-sheet-backdrop.support-ticket-sheet-closing {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.24s ease;
  }

  body[data-mobile-navigation="bottom"] .event-popout,
  body[data-mobile-navigation="bottom"] .link-tree-popout,
  body[data-mobile-navigation="bottom"] .task-detail-drawer,
  body[data-mobile-navigation="bottom"] .support-ticket-sheet,
  body[data-mobile-navigation="bottom"] .tracking-link-drawer,
  body[data-mobile-navigation="bottom"] .newsletter-audience-drawer,
  body[data-mobile-navigation="bottom"] .ai-drawer {
    display: flex;
    flex-direction: column;
  }

  body[data-mobile-navigation="bottom"] .event-popout-header,
  body[data-mobile-navigation="bottom"] .link-tree-popout-header,
  body[data-mobile-navigation="bottom"] .task-detail-drawer-header,
  body[data-mobile-navigation="bottom"] .support-ticket-sheet-header,
  body[data-mobile-navigation="bottom"] .newsletter-audience-drawer-header,
  body[data-mobile-navigation="bottom"] .ai-drawer-header {
    padding-top: 28px;
    touch-action: none;
  }

  body[data-mobile-navigation="bottom"] .event-popout-body,
  body[data-mobile-navigation="bottom"] .link-tree-popout-body,
  body[data-mobile-navigation="bottom"] .task-detail-drawer-body,
  body[data-mobile-navigation="bottom"] .support-ticket-sheet-body,
  body[data-mobile-navigation="bottom"] .newsletter-audience-drawer-body,
  body[data-mobile-navigation="bottom"] .ai-drawer-content {
    flex: 1 1 auto;
  }

  /* A task sheet owns the gesture. Its form scrolls internally and the board
     behind it stays fixed, rather than moving under an open modal. */
  body[data-mobile-navigation="bottom"]:has(.task-detail-drawer) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body[data-mobile-navigation="bottom"]:has(.support-ticket-sheet) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body[data-mobile-navigation="bottom"] .task-detail-drawer-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  body[data-mobile-navigation="bottom"] .support-ticket-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 28px 1.25rem 1.15rem;
    border-bottom: 1px solid var(--line-strong);
    touch-action: none;
  }

  body[data-mobile-navigation="bottom"] .support-ticket-sheet-header h2 {
    margin: 0.2rem 0 0;
    font-size: 1.2rem;
    line-height: 1.3;
  }

  body[data-mobile-navigation="bottom"] .support-ticket-sheet-body {
    min-height: 0;
    overflow-y: auto;
    padding: 1.15rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  body[data-mobile-navigation="bottom"] .support-ticket-sheet-body .ticket-form {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-mobile-navigation="bottom"] .support-ticket-sheet-body .ticket-form > h2 {
    display: none;
  }
}

@keyframes mobile-bottom-sheet-in {
  from { transform: translateY(52px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes mobile-bottom-sheet-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(52px); opacity: 0; }
}

.task-card {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  background: var(--white);
  /* Lift it off the column fill. Without this the cards and the column behind
     them are the same surface, which is why they read as one block of text. */
  box-shadow: 0 1px 2px rgba(var(--green-900-rgb), 0.06),
              0 1px 6px rgba(var(--green-900-rgb), 0.05);
  cursor: grab;
}

.task-card:hover {
  border-color: var(--chart-1);
  box-shadow: 0 2px 4px rgba(var(--green-900-rgb), 0.09),
              0 4px 12px rgba(var(--green-900-rgb), 0.08);
}

.task-card.is-overdue {
  background: #fff1f0;
  border-color: #e8aaa2;
}

.task-card.is-overdue:hover {
  background: #ffe8e5;
  border-color: var(--status-bad, #b3261e);
}

/* ---- per-card controls --------------------------------------------------
   The original board gave every card a complete/edit pair. The rewrite left
   only drag, so finishing a task meant leaving the board to do it. */
.task-card-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 0.3rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--line);
  /* Present but quiet until the card is under the pointer -- eleven cards each
     showing three buttons is louder than the titles they belong to. */
  opacity: 0;
  transition: opacity 0.15s ease;
}

.task-card:hover .task-card-foot,
.task-card:focus-within .task-card-foot { opacity: 1; }

.task-card:not(:has(.task-desc)) .task-card-foot {
  margin-top: 0.15rem;
  padding-top: 0.15rem;
}

@media (hover: none) {
  /* No pointer, no hover: on touch the controls would be unreachable. */
  .task-card-foot { opacity: 1; }
}

.task-card-action {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.task-card-action:hover {
  border-color: var(--line-strong);
  background: var(--paper);
  color: var(--green-900);
}

.task-card-action.is-danger:hover { color: var(--status-bad, #b3261e); }
.task-card-action svg, .task-card-action i,
.task-card-action svg, .task-card-action [data-lucide] { width: 14px; height: 14px; }
.task-card-foot-spacer { flex: 1 1 auto; }

.task-card.is-done .task-card-action[data-task-complete] { color: var(--chart-1); }
.task-card.is-dragging { opacity: 0.45; }
.task-card.is-done { opacity: 0.6; }
.task-card.is-done .task-title { text-decoration: line-through; }
.task-title { margin: 0; font-size: 0.88rem; font-weight: 600; line-height: 1.35; }
.task-desc {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.task-meta { margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.72rem; }
.task-category, .task-priority {
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  background: var(--surface-muted, rgba(0,0,0,0.05));
  color: var(--muted);
}
/* Priority carries its word; colour is the second signal, never the only one. */
.task-priority.is-urgent, .task-priority.is-high { color: var(--status-bad); font-weight: 600; }
.task-column-empty { margin: 0; font-size: 0.8rem; color: var(--muted); }
.task-board-note { max-width: 46rem; }
.task-board-note h4 { margin: 0 0 0.35rem; }
.task-board-note p { margin: 0; color: var(--muted); }

/* ---- topbar filter group ------------------------------------------------ */

.toolbar-actions > #dateRangeControl[hidden] { display: none; }

/* The date range trigger keeps widgets.css's generic look by default -- 8px
   corners, paper fill, a smaller face -- which reads as a different kind of
   control from the section select sitting right beside it. In the topbar it is
   built from the same parts that select is: same height, same pill, same
   hairline, same face. */
.toolbar-actions .daterange-trigger {
  height: 44px;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--green-900);
  padding: 0 16px;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: none;
}

.toolbar-actions .daterange-trigger:hover {
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--chart-1);
}

.toolbar-actions .daterange-trigger i,
.toolbar-actions .daterange-trigger [data-lucide],
.toolbar-actions .daterange-trigger svg {
  width: 15px;
  height: 15px;
  color: var(--green-900);
  opacity: 0.7;
}

.toolbar-actions .daterange-caret { margin-left: 2px; opacity: 0.85; }

html[data-theme="dark"] .toolbar-actions .daterange-trigger {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .toolbar-actions .daterange-trigger,
html[data-theme="dark"] .toolbar-actions .daterange-trigger i,
html[data-theme="dark"] .toolbar-actions .daterange-trigger [data-lucide],
html[data-theme="dark"] .toolbar-actions .daterange-trigger svg {
  color: var(--ink);
}

html[data-theme="dark"] .analytics-view-picker select {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  border-color: var(--line-strong);
}

html[data-theme="dark"] .analytics-view-picker select:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* The caret is a background image, so it cannot inherit the text colour --
   recolour it rather than leaving a near-black arrow on a dark pill. */
html[data-theme="dark"] .analytics-view-picker::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25L7 9.25L11 5.25' stroke='%23F6F1E3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The card opens in place rather than in a modal: the column it belongs to
   stays visible, so you can see what you are moving it away from. */
.task-card.is-editing { cursor: default; border-color: var(--chart-1); }
.task-edit-form { display: grid; gap: 0.5rem; }
.task-edit-form label { display: grid; gap: 3px; }
.task-edit-form label > span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.task-edit-form input,
.task-edit-form select,
.task-edit-form textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 5px 8px;
  font: inherit;
  font-size: 0.82rem;
  background: var(--white);
  color: var(--green-900);
}
.task-edit-form textarea { resize: vertical; }
.task-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.task-edit-actions { display: flex; gap: 6px; margin-top: 2px; }
.task-edit-actions button { font-size: 0.8rem; padding: 5px 12px; }

/* ---- custom select ------------------------------------------------------
   The native control opens an OS-drawn menu that no stylesheet can reach, so
   dashboard.js swaps in a listbox facade and keeps the real <select> around
   for form semantics and assistive tech. This is the shared look, written in
   this portal's tokens; a client brand file can still override it. */

.wh-select { position: relative; display: inline-block; width: 100%; }

/* Present to the accessibility tree and to forms, absent from the layout. */
.wh-select-native {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.wh-select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--green-900);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
}

.wh-select-button:hover {
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--chart-1);
}

.wh-select.open .wh-select-button,
.wh-select-button:focus-visible {
  border-color: var(--chart-1);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--green-900-rgb), 0.12);
}

.wh-select-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wh-select-caret {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-bottom: 2px;
  margin-right: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  opacity: 0.7;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

/* Flip through the top, not the bottom: rotate(225deg) would spin it the long
   way round and read as a wobble. */
.wh-select.open .wh-select-caret {
  transform: rotate(-135deg);
  margin-bottom: -2px;
}

.wh-select-list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  margin: 0;
  list-style: none;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 12px 32px rgba(var(--green-900-rgb), 0.16);
}

/* Viewport-escaped lists must not retain the anchored list's right edge. */
body > .wh-select-list {
  right: auto !important;
  min-width: 0;
  width: var(--wh-select-width) !important;
  max-height: 240px;
}

/* Lists escaped from a drawer sit beside its overlay in the document tree.
   Keep them above that overlay so their options can be clicked and scrolled. */
body > .wh-select-list.wh-select-list-viewport {
  z-index: 110;
  pointer-events: auto;
}

/* The task drawer body scrolls; its open custom selects are positioned by JS
   against the viewport so their option lists are not clipped by that scroller. */
.task-detail-drawer .wh-select-list { position: fixed; }

.wh-select:not(.open) .wh-select-list { display: none; }

.wh-select-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--green-900);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.wh-select-option:hover,
.wh-select-option:focus {
  background: var(--sage-100);
  outline: none;
}

.wh-select-option[aria-selected="true"] {
  background: var(--sage-200);
  font-weight: 650;
}

html[data-theme="dark"] .wh-select-button {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

html[data-theme="dark"] .wh-select-button:hover {
  background: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .wh-select-list {
  background: var(--panel-dark, #10241d);
  border-color: var(--line-strong);
}

html[data-theme="dark"] .wh-select-option { color: var(--ink); }

/* In the filter group the picker is one control among several rather than a
   block pushed to the far edge of the title line. */
.toolbar-actions > .analytics-view-picker {
  flex: 0 1 200px;
  min-width: 150px;
  margin-left: 0;
}

/* The facade carries the look now; the native element behind it must not also
   paint a pill, or a stale empty one shows through. */
.analytics-view-picker .wh-select-native { min-height: 0; height: 1px; }
.analytics-view-picker:has(.wh-select)::after { display: none; }

/* Hoisted controls sit at the far right of the title line, not tucked against
   the title. The row only shrink-wraps its contents by default, so it has to
   claim the full width before pushing anything anywhere -- and only when it is
   actually holding hoisted controls, so a bare title still sizes to its text. */
.topbar-heading-row:has([data-hoisted]) {
  width: 100%;
}

/* Push from the title instead: everything after it goes right, whatever
   element type the hoisted controls happen to be, and however many there are.
   Keying off the controls means guessing their tag. */
.topbar-heading-row:has([data-hoisted]) #viewTitle {
  margin-right: auto;
}



/* ---- one control metric -------------------------------------------------
   Measured across all thirteen tabs: twelve different heights, five corner
   radii, four font sizes. The topbar three (section select, date range,
   Analyze) were already right, so the rest are catching up rather than
   changing to something new. */

.secondary-btn {
  border-color: var(--line-strong);
  font-weight: var(--control-weight);
}

/* The bare-element rule. 190 buttons on this page have no class at all and
   were picking up an 8px-cornered 46px box from a base rule. */
  .view-content button:not(.icon-button):not(.assistant-send):not(.table-sort):not(.task-card-action):not(.tab-card-action):not(.emr-patient-row):not(.native-vault-row):not(.emr-event):not(.ticket-comments-toggle):not(.wh-select-option):not(.wh-select-button):not(.hub-task-row):not([class*="emr-week"]):not([class*="emr-day"]),
.filter-drawer button:not(.icon-button),
.settings-detail button:not(.icon-button):not(.table-sort) {
  box-sizing: border-box;
  min-height: var(--control-h);
  border-radius: var(--control-radius);
  font-size: var(--control-font);
  font-weight: var(--control-weight);
  line-height: 1.25;
}

/* Text controls need enough leading for descenders such as g, j, p, q and y.
   Icon-only controls retain their compact geometry in their own rule. */
button:not(.icon-button) { line-height: 1.25; }

/* Named controls that each grew their own size. */
.analysis-button,
.daterange-trigger,
.wh-select-button,
.link-action-btn,
.folder-action-btn,
.outline-green-btn,
button.primary,
.link-tree-edit-button {
  box-sizing: border-box;
  height: var(--control-h);
  min-height: var(--control-h);
  border-radius: var(--control-radius);
  padding: var(--control-pad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  font-size: var(--control-font);
  line-height: 1;
  white-space: nowrap;
}

.analysis-button,
button.primary {
  font-weight: var(--control-weight-strong);
}

.daterange-trigger,
.wh-select-button,
.link-action-btn,
.folder-action-btn,
.outline-green-btn,
.link-tree-edit-button {
  font-weight: var(--control-weight);
}

/* The quiet ones had no edge at all, so at 44px they read as floating text. */
.link-action-btn,
.folder-action-btn,
.outline-green-btn {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.64);
  color: var(--green-900);
}

.link-action-btn:hover,
.folder-action-btn:hover,
.outline-green-btn:hover {
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--chart-1);
}

/* Icon-only stays a 44px circle: same height as the pills, no text to pad. */
.icon-button {
  box-sizing: border-box;
  width: var(--control-h);
  height: var(--control-h);
  min-height: var(--control-h);
  border-radius: var(--control-radius);
}

/* Every remaining native <select>, including ones no custom listbox reaches
   (a form inside a drawer, a client template). Same pill, same face. */
select:not(.wh-select-native):not([multiple]):not([size]) {
  box-sizing: border-box;
  height: var(--control-h);
  min-height: var(--control-h);
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  padding: var(--control-pad);
  background-color: rgba(255, 255, 255, 0.64);
  color: var(--green-900);
  font-size: var(--control-font);
  font-weight: var(--control-weight);
  line-height: 1;
}

html[data-theme="dark"] select:not(.wh-select-native):not([multiple]):not([size]) {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

/* Rows in a dense list keep their own size on purpose -- a 44px pill around
   every patient name would draw a button where there is a list. */
.emr-patient-row,
.native-vault-row,
.sidebar-user,
.emr-event,
.table-sort,
.ticket-comments-toggle,
.task-card-action,
.tab-card-action,
.wh-select-option {
  min-height: 0;
}

/* Icons scale with the smaller face rather than staying at the old 16px. */
.primary-btn svg, .secondary-btn svg, .danger-btn svg,
.analysis-button svg, .link-action-btn svg, .folder-action-btn svg,
.link-tree-edit-button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* Hoisted onto the title line, so it sizes to the row rather than to the page
   it came from. */
.topbar-heading-row .emr-patients-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  /* .emr-toolbar wraps by design -- it is a full-width bar on its own page.
     In the title row there is less width, so it wrapped, and the button
     dropped under the search. One line here. */
  flex-wrap: nowrap;
}

.topbar-heading-row .emr-patients-toolbar .emr-search {
  flex: 0 1 320px;
  min-width: 180px;
}

.topbar-heading-row .emr-patients-toolbar > button {
  flex: 0 0 auto;
}

.topbar-heading-row .native-vault-search {
  flex: 0 0 auto;
  width: 324px;
  max-width: 100%;
  /* It is padding-sized, which put it at 46px next to a 44px button. */
  box-sizing: border-box;
  height: var(--control-h);
  padding-block: 0;
}

.topbar-heading-row .native-vault-toolbar {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.topbar-heading-row .native-vault-toolbar .dir-category-select,
.topbar-heading-row .native-vault-toolbar .wh-select--dir-category-select {
  flex: 0 1 220px;
  min-width: 150px;
}

@media (max-width: 720px) {
  .topbar-heading-row:has(.native-vault-toolbar) {
    flex-wrap: wrap;
    align-items: center;
  }

  .topbar-heading-row .native-vault-toolbar {
    width: 100%;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .topbar-heading-row .native-vault-search {
    width: 100%;
    flex: 1 1 100%;
  }

  .topbar-heading-row .native-vault-toolbar .dir-category-select,
  .topbar-heading-row .native-vault-toolbar .wh-select--dir-category-select {
    flex: 1 1 150px;
  }

  .topbar-heading-row .native-vault-toolbar .primary-btn {
    flex: 1 0 auto;
  }

  .native-vault-drawer {
    width: 100vw;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    border-left: 0;
  }

  .native-vault-drawer .native-vault-detail-head {
    gap: 12px;
  }

  .native-vault-drawer-actions {
    flex-wrap: wrap;
  }
}

/* In the title row it is a group of controls, not a full-width toolbar -- the
   auto margin that pushed it right inside the page would fight the title's. */
.topbar-heading-row .emr-schedule-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  width: auto;
  flex-wrap: nowrap;
}

.topbar-heading-row .emr-schedule-toolbar .emr-date-nav,
.topbar-heading-row .emr-schedule-toolbar .emr-toolbar-actions {
  margin-left: 0;
}

.topbar-heading-row .task-board-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

/* The board head only existed to hold the controls that are now in the title
   row; left in place it reserves empty vertical space above the columns. */
.task-board-head:empty,
.task-board-head:not(:has(.task-board-controls > *)) {
  display: none;
}

/* A second button vocabulary -- <a class="button primary|secondary|ghost"> --
   that predates .primary-btn and was never folded in, so these kept 6px
   corners, a 36px box and a link underline while everything else moved to the
   metric. Mapped on rather than rewritten in the markup, because the class is
   used across the eligibility drawers too. */
.button,
body.eligibility-view .button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  height: var(--control-h);
  min-height: var(--control-h);
  padding: var(--control-pad);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-size: var(--control-font);
  font-weight: var(--control-weight-strong);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.button.primary,
body.eligibility-view .button.primary {
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--white);
}

.button.secondary,
body.eligibility-view .button.secondary {
  background: rgba(255, 255, 255, 0.64);
  border-color: var(--line-strong);
  color: var(--green-900);
  font-weight: var(--control-weight);
}

.button.secondary:hover,
body.eligibility-view .button.secondary:hover {
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--chart-1);
}

.button.ghost,
body.eligibility-view .button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-weight: var(--control-weight);
}

.topbar-heading-row .eligibility-new-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

/* The header only carried the title block and the actions, both of which have
   moved, so it would otherwise reserve empty space above the content. */
.page-header.eligibility-page-header:not(:has(> *)) { display: none; }

/* ---------------------------------------------------------------------------
   Support Hub + Finances.

   Both lean on the existing tokens rather than fixed colours so the dark theme
   at the bottom of this file recolours them for free -- see the --ink/--line
   overrides under the dark block.
   --------------------------------------------------------------------------- */

.hub-totals,
.finance-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.hub-total,
.finance-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
  padding: 14px 16px;
}

.hub-total .value,
.finance-card .value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2px;
}

.hub-total .label,
.finance-card .label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* The status colour is carried on the left edge, so the number itself stays
   legible against the card rather than being tinted twice. */
.hub-total.status-blocked { border-left: 3px solid var(--coral); }
.hub-total.status-in_progress { border-left: 3px solid var(--blue); }
.hub-total.status-open { border-left: 3px solid var(--amber); }
.hub-total.status-done { border-left: 3px solid var(--green); }

.hub-warning {
  background: rgba(156, 93, 69, 0.1);
  border: 1px solid var(--coral);
  border-radius: 12px;
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 16px;
  padding: 10px 14px;
}

.hub-filters { gap: 8px; }

.hub-portal-tag {
  background: var(--sage-200);
  border-radius: 999px;
  color: var(--green-800);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
}

.hub-ticket .ticket-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.hub-ticket .ticket-head h3 { margin: 0; }
.hub-ticket .ticket-head a { color: inherit; text-decoration: none; }
.hub-ticket .ticket-head a:hover { text-decoration: underline; }

/* Support Hub task list redesign. The aggregate stays intentionally
   read-only: each row is a bounded client projection and the drawer links to
   the owning portal for full details or writes. */
.hub-task-app {
  position: relative;
  min-width: 0;
  color: var(--ink);
}

.agency-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agency-section-heading h2 { margin: 0; }
.agency-lead-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.58); }
.agency-lead-form label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.agency-lead-form input, .agency-lead-form select { width: 100%; }
.agency-lead-form .button-row, .agency-lead-form .form-error { grid-column: 1 / -1; }
@media (max-width: 720px) { .agency-lead-form { grid-template-columns: 1fr; } }
[data-agency-client-id], [data-agency-lead-id] { cursor: pointer; }
[data-agency-client-id]:hover, [data-agency-client-id]:focus-visible, [data-agency-lead-id]:hover, [data-agency-lead-id]:focus-visible { color: var(--green-700); outline: 0; }
.agency-drawer-backdrop { position: fixed; z-index: 90; inset: 0; background: rgba(16, 36, 30, 0.28); }
.agency-drawer { position: fixed; z-index: 91; top: 0; right: 0; width: min(480px, 100vw); height: 100vh; background: var(--paper); border-left: 1px solid var(--line-strong); box-shadow: -20px 0 50px rgba(var(--ink-rgb), 0.18); }
.agency-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px; border-bottom: 1px solid var(--line); }
.agency-drawer-header h2 { margin: 4px 0 0; color: var(--ink); font-size: 22px; }
.agency-drawer-scroll { height: calc(100vh - 91px); overflow: auto; padding: 20px 24px 32px; }
.agency-drawer-fields { display: grid; gap: 12px; margin: 0; }
.agency-drawer-fields > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.agency-drawer-fields dt { color: var(--muted); font-size: 11px; font-weight: 700; }
.agency-drawer-fields dd { margin: 0; color: var(--ink); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.agency-drawer-scroll section { margin-top: 20px; }
.agency-drawer-scroll h3 { margin: 0 0 8px; color: var(--ink); font-size: 14px; }
.agency-drawer-scroll pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); font: inherit; font-size: 12px; line-height: 1.45; }
/* Reporting controls are global portal chrome. They do not apply to this
   single-page task tool and must not remain visible after leaving Analytics. */
.dashboard-body:has(.hub-task-app) .toolbar { display: none; }
.dashboard-body:has(.hub-task-app) .topbar-heading-row {
  width: 100%;
  gap: 10px;
}
.dashboard-body:has(.hub-task-app) .topbar-heading-row > #viewTitle {
  flex: 0 0 auto;
}
.dashboard-body:has(.hub-task-app) .topbar-heading-row .hub-task-toolbar[data-hoisted] {
  display: flex;
  flex: 1 1 420px;
  min-width: 260px;
  min-height: var(--control-h);
  padding: 0;
  border: 0;
  gap: 8px;
}
.dashboard-body:has(.hub-task-app) .topbar-heading-row .hub-task-toolbar[data-hoisted] .hub-task-search {
  flex: 1 1 220px;
  min-width: 160px;
}
.dashboard-body:has(.hub-task-app) .topbar-heading-row .hub-task-toolbar[data-hoisted] .wh-select {
  flex: 0 0 auto;
  width: auto;
}
.dashboard-body:has(.hub-task-app) .topbar-heading-row .hub-task-new-button[data-hoisted] {
  position: static;
  flex: 0 0 auto;
}
.hub-task-new-button {
  position: absolute;
  right: 0;
  top: -64px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}
.hub-task-new-button svg { width: 16px; height: 16px; }
.hub-task-warning { margin-bottom: 10px; }
.hub-task-board {
  min-height: calc(100vh - 130px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.hub-task-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.hub-task-toolbar select { min-width: 140px; }
.hub-task-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 190px;
  min-height: 39px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--white);
}
.hub-task-search svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--muted); }
.hub-task-search input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.hub-task-search input:focus { outline: 0; }
.hub-task-table-header,
.hub-task-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 10px;
}
.hub-task-metadata {
  display: grid;
  grid-template-columns: minmax(230px, 1.4fr) 100px 80px 76px 120px 110px;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}
.hub-task-metadata > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-task-table-header {
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.hub-task-table-header > span:first-child,
.hub-task-row > .hub-task-check { grid-row: 1 / span 2; align-self: center; }
.hub-task-table-header > span:nth-child(2),
.hub-task-row > .hub-task-title { grid-column: 2; }
.hub-task-table-header > .hub-task-metadata,
.hub-task-row > .hub-task-metadata { grid-column: 2; }
.hub-task-table-header .hub-task-metadata > span:nth-child(n+2),
.hub-task-metadata > span:nth-child(n+2) { justify-self: center; text-align: center; }
.hub-task-group > header {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border-bottom: 1px solid var(--line);
  background: #f4f1eb;
}
.hub-task-group > header svg { width: 14px; height: 14px; }
.hub-task-group > header strong { font-size: 13px; }
.hub-task-group > header span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(37, 30, 82, 0.07);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.hub-task-row {
  width: 100%;
  min-height: 64px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.hub-task-row:hover,
.hub-task-row:focus-visible { background: #edf5f8; outline: 0; }
.hub-task-group,
.hub-task-group > header,
.hub-task-row { border-radius: 0; }
.hub-task-check {
  width: 14px;
  height: 14px;
  border: 1px solid #aca9bd;
  border-radius: 3px;
  background: var(--white);
}
.hub-task-title { min-width: 0; padding: 3px 0 4px; }
.hub-task-title strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-task-client,
.hub-task-unavailable { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 901px) {
  .hub-task-row { grid-template-columns: 22px minmax(230px, 1.4fr) 100px 80px 76px 120px 110px; }
  .hub-task-row > .hub-task-title { grid-column: 2; grid-row: 1; }
  .hub-task-row > .hub-task-metadata { display: contents; }
  .hub-task-row > .hub-task-metadata > span:first-child { grid-column: 2; grid-row: 2; align-self: start; }
  .hub-task-row > .hub-task-metadata > span:nth-child(2) { grid-column: 3; }
  .hub-task-row > .hub-task-metadata > span:nth-child(3) { grid-column: 4; }
  .hub-task-row > .hub-task-metadata > span:nth-child(4) { grid-column: 5; }
  .hub-task-row > .hub-task-metadata > span:nth-child(5) { grid-column: 6; }
  .hub-task-row > .hub-task-metadata > span:nth-child(6) { grid-column: 7; }
  .hub-task-row > .hub-task-metadata > span:nth-child(n+2) { grid-row: 1 / span 2; align-self: center; }
}
.hub-task-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  min-height: 24px;
  padding: 2px 6px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.15;
  white-space: nowrap;
}
.hub-task-badge-todo { border-color: #c5c5d1; background: #f8f8fb; color: #4f4c64; }
.hub-task-badge-progress { border-color: #74b9c7; background: #eefafd; color: #17677a; }
.hub-task-badge-blocked { border-color: #e68787; background: #fff4f4; color: #b3262d; }
.hub-task-badge-done { border-color: #8ab89b; background: #f0faf3; color: #2f6f48; }
.hub-task-assignee { display: flex; align-items: center; justify-content: center; min-width: 28px; }
.hub-task-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #26186f;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hub-task-empty { padding: 36px 16px; color: var(--muted); text-align: center; }
.hub-task-board-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 40px;
  padding: 13px 14px;
  color: var(--muted);
  font-size: 10px;
}
.hub-task-pagination { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hub-task-pagination button {
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.hub-task-pagination button:hover:not(:disabled) { border-color: var(--chart-1); background: #edf5f8; }
.hub-task-pagination button:disabled { cursor: default; opacity: 0.45; }
.hub-task-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 980;
  background: rgba(24, 20, 57, 0.18);
}
.hub-task-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 981;
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 220px));
  min-width: 440px;
  border-left: 1px solid var(--line-strong);
  background: #fffefb;
  box-shadow: -16px 0 36px rgba(24, 20, 57, 0.16);
}
.hub-task-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 16px;
  min-height: 74px;
  padding: 17px 18px 14px;
  border-bottom: 1px solid var(--line);
}
.hub-task-drawer-header h2 { margin: 0; color: var(--ink); font-family: var(--heading-font, inherit); font-size: 21px; line-height: 1.25; }
.hub-task-drawer-title { min-width: 0; flex: 1 1 0; }
.hub-task-description { flex: 0 0 100%; width: 100%; max-width: none; margin: 0; color: var(--text); font-size: 13px; line-height: 1.45; }
.hub-task-edit-form { display: grid; flex: 0 0 100%; width: 100%; gap: 10px; }
.hub-task-edit-form label { display: grid; gap: 5px; }
.hub-task-edit-form label > span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.hub-task-edit-form input,
.hub-task-edit-form textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); font: inherit; }
.hub-task-edit-form textarea { resize: vertical; }
.hub-task-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.hub-task-eyebrow { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hub-task-drawer-actions { display: flex; gap: 7px; }
.hub-task-icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
.hub-task-icon-button svg { width: 16px; height: 16px; }
.hub-task-drawer-scroll { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px 26px; }
.hub-task-facts {
  display: grid;
  gap: 10px;
}
.hub-task-fact { display: grid; gap: 5px; min-width: 0; margin: 0; }
.hub-task-fact > span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.hub-task-fact select,
.hub-task-fact input,
.hub-task-fact strong { min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); font: inherit; font-size: 15px; }
.hub-task-fact strong { display: flex; align-items: center; overflow-wrap: anywhere; font-weight: 600; }
.hub-task-fact select:disabled,
.hub-task-fact input:disabled { cursor: wait; opacity: 0.65; }
.hub-task-drawer-section { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.hub-task-drawer-section h3,
.hub-task-notes h3 { margin: 0 0 8px; color: var(--ink); font-size: 14px; }
.hub-task-drawer-section p,
.hub-task-notes p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.hub-task-notes { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.hub-task-notes form { display: grid; gap: 8px; }
.hub-task-notes textarea,
.hub-task-comment-form textarea { width: 100%; min-width: 0; resize: vertical; }
.hub-task-notes button,
.hub-task-comment-form button { justify-self: start; }
.hub-task-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-task-section-heading a { display: inline-flex; align-items: center; gap: 5px; color: #26186f; font-size: 12px; font-weight: 700; text-decoration: none; }
.hub-task-section-heading svg { width: 13px; height: 13px; }
.hub-task-empty-panel { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); font-size: 13px; }
.hub-task-empty-panel span { color: var(--muted); }
.hub-task-comment-list { display: grid; gap: 11px; }
.hub-task-comment { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.hub-task-comment.is-reply { margin-left: 17px; padding-left: 11px; border-left: 2px solid #d8d6e2; }
.hub-task-comment header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hub-task-comment header strong { color: var(--ink); font-size: 13px; }
.hub-task-comment header time { color: var(--muted); font-size: 11px; }
.hub-task-comment > p { margin: 5px 0 0; color: var(--text); font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.hub-task-comment-replying { color: var(--muted) !important; font-size: 11px !important; }
.hub-task-comment-reply { margin: 6px 0 0; padding: 0; border: 0; background: transparent; color: #26186f; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.hub-task-comment-form { display: grid; gap: 8px; margin-top: 13px; }
.hub-task-reply-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.hub-task-reply-banner button { padding: 0; border: 0; background: transparent; color: #26186f; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.hub-task-history { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hub-task-history li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; position: relative; min-height: 42px; }
.hub-task-history li > span { position: relative; z-index: 1; width: 10px; height: 10px; margin-top: 3px; border: 1px solid #c9c7d6; border-radius: 50%; background: #fff; }
.hub-task-history li:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 13px; bottom: -3px; width: 1px; background: #d8d6e2; }
.hub-task-history time { display: block; color: var(--muted); font-size: 8px; }
.hub-task-history p { color: var(--text); }
.hub-task-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex: 0 0 auto;
  min-height: 62px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: #fffefb;
}
.hub-task-drawer-footer .primary-btn { min-width: 180px; text-align: center; text-decoration: none; }
.hub-task-drawer-footer .hub-task-footer-edit { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; }
.hub-task-drawer-footer .hub-task-footer-edit svg { width: 15px; height: 15px; }
.hub-task-new-form { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.hub-task-new-form .hub-task-drawer-scroll { display: grid; align-content: start; gap: 13px; }
.hub-task-new-form label { display: grid; gap: 5px; margin: 0; }
.hub-task-new-form label > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.hub-task-new-form input,
.hub-task-new-form select,
.hub-task-new-form textarea { width: 100%; min-width: 0; }
.hub-task-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.hub-task-form-note { margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--sage-100); color: var(--text); font-size: 11px; line-height: 1.45; }
.hub-task-muted { margin-top: 7px !important; }

@media (max-width: 1280px) {
  .hub-task-metadata { grid-template-columns: minmax(180px, 1.3fr) 90px 72px 70px 112px 100px; gap: 7px; }
  .hub-task-toolbar { gap: 7px; }
  .hub-task-toolbar select { min-width: 116px; }
  .hub-task-badge { width: 76px; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  .hub-task-row { grid-template-columns: 22px minmax(180px, 1.3fr) 90px 72px 70px 112px 100px; }
}
@media (max-width: 900px) {
  .dashboard-body:has(.hub-task-app) .topbar-heading-row { flex-wrap: wrap; }
  .dashboard-body:has(.hub-task-app) .topbar-heading-row .hub-task-toolbar[data-hoisted],
  .dashboard-body:has(.hub-task-app) .topbar-heading-row .hub-task-new-button[data-hoisted] {
    position: static;
  }
  .dashboard-body:has(.hub-task-app) .topbar-heading-row .hub-task-toolbar[data-hoisted] {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
  }
  .dashboard-body:has(.hub-task-app) .topbar-heading-row .hub-task-new-button[data-hoisted] { margin-left: auto; }
  .hub-task-new-button:not([data-hoisted]) {
    position: static;
    display: flex;
    width: fit-content;
    margin: 0 0 10px auto;
  }
  .hub-task-toolbar { flex-wrap: wrap; }
  .hub-task-search { flex-basis: 100%; }
  .hub-task-board-footer { flex-wrap: wrap; }
  .hub-task-metadata { grid-template-columns: minmax(180px, 1fr) 100px 84px; }
  .hub-task-metadata > span:nth-child(n+4) { display: none; }
  .hub-task-drawer { width: 100vw; min-width: 0; }
}
@media (max-width: 640px) {
  .hub-task-form-grid { grid-template-columns: 1fr; }
}

.finance-shell .data-table { width: 100%; }
.finance-shell h2 { font-size: 16px; margin: 24px 0 10px; }

.finance-shell .num { text-align: right; font-variant-numeric: tabular-nums; }
.finance-shell .invoice-due { text-align: center; vertical-align: middle; }
.finance-shell .positive { color: var(--green); }
.finance-shell .negative { color: var(--coral); }

.finance-kind {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  white-space: nowrap;
}
.finance-kind.kind-revenue { background: rgba(53, 110, 85, 0.14); color: var(--green); }
.finance-kind.kind-cost { background: rgba(156, 93, 69, 0.14); color: var(--coral); }
.finance-kind.kind-payout { background: rgba(95, 127, 150, 0.16); color: var(--blue); }

.finance-unpaid {
  background: rgba(185, 154, 82, 0.18);
  border-radius: 999px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
}

.finance-form { display: grid; gap: 12px; margin-bottom: 20px; }
.finance-form .button-row { display: flex; gap: 8px; }

.finance-shell .row-actions { text-align: right; width: 44px; }

.finance-shell .icon-btn {
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
  padding: 6px;
}
.finance-shell .icon-btn:hover { background: var(--sage-200); color: var(--coral); }
.finance-shell .icon-btn i { height: 16px; width: 16px; }

/* Knowledge Hub: an answer/source workspace over the existing knowledge
   articles. The content stays in the shared model; this is only its governed,
   searchable presentation. */
.knowledge-view .view-content { margin: 0; max-width: none; }
.knowledge-hub { display: flex; align-items: stretch; min-height: min(760px, calc(100vh - 150px)); background: rgba(255,255,255,.46); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--soft-shadow); overflow: hidden; }
.knowledge-hub-main { flex: 1 1 auto; min-width: 0; padding: 22px; }
.knowledge-command-bar { display: flex; gap: 10px; align-items: center; }
.knowledge-search { display: flex; align-items: center; gap: 10px; min-height: 46px; flex: 1; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.88); }
.knowledge-search i { width: 18px; color: var(--green-800); }.knowledge-search input { width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; outline: none; color: var(--text); }
.knowledge-verified-filter { display: flex; align-items: center; gap: 7px; min-height: 44px; margin: 0; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.78); color: var(--text); font-size: 12px; white-space: nowrap; }.knowledge-verified-filter input { min-width: auto; accent-color: var(--green-800); }
.knowledge-ai-create { min-height: 44px; white-space: nowrap; }.knowledge-ai-create i { width: 16px; }
.topbar-heading-row .knowledge-search { flex: 0 1 320px; min-width: 180px; min-height: var(--control-h); box-sizing: border-box; }
.topbar-heading-row .knowledge-add-new { flex: 0 0 auto; white-space: nowrap; }
.knowledge-question-overlay { position: fixed; z-index: 100; inset: 0; pointer-events: none; }
.knowledge-question-backdrop { position: absolute; inset: 0; background: rgba(16,36,30,.42); pointer-events: auto; }
.knowledge-question-drawer { position: absolute; z-index: 1; top: 0; right: 0; display: flex; flex-direction: column; width: min(460px, 100%); height: 100%; overflow: hidden; border-left: 1px solid var(--line-strong); background: var(--paper); box-shadow: -12px 0 32px rgba(var(--green-900-rgb), .16); pointer-events: auto; animation: knowledge-drawer-in .18s ease-out; }
.knowledge-question-drawer > header { flex: 0 0 auto; min-height: 68px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.knowledge-question-drawer > header h2 { margin: 2px 0 0; color: var(--ink); font-size: 20px; }
.knowledge-question-drawer form { display: grid; gap: 15px; padding: 20px 22px 28px; }
.knowledge-question-drawer input { min-height: 44px; }
.knowledge-question-drawer .button-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.knowledge-workspace { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 18px; align-items: start; }
.knowledge-categories { padding: 10px 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.78); }.knowledge-categories-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 2px 4px 8px; }.knowledge-categories h2 { margin: 5px 0 9px; color: var(--ink); font-size: 13px; }.knowledge-category-add { width: 22px; min-width: 22px; height: 22px; min-height: 22px; flex: 0 0 22px; padding: 0; border-radius: 50%; display: grid; place-items: center; line-height: 0; color: var(--muted); }.knowledge-category-add i, .knowledge-category-add svg, .knowledge-category-add [data-lucide] { display: block; width: 10px; height: 10px; }
.knowledge-category { width: 100%; min-height: 37px; padding: 0 8px; border: 0; border-radius: 5px; display: flex; align-items: center; gap: 9px; background: transparent; color: var(--text); text-align: left; font-size: 12px; font-weight: 600; }.knowledge-category:hover, .knowledge-category.active { background: var(--sage-200); color: var(--green-900); }.knowledge-category i { width: 16px; }.knowledge-category span { flex: 1; }.knowledge-category b { font-size: 11px; font-weight: 600; }.knowledge-category-rule { height: 1px; margin: 10px 7px; background: var(--line); }
/* Categories are navigation rows, not filter chips. Keep the selected state
   legible without turning the full-width row into a capsule. */
.knowledge-category,
.knowledge-category:hover,
.knowledge-category.active { border-radius: 6px !important; }
.knowledge-answer-column { min-width: 0; }.knowledge-selected-card { padding: 19px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.88); }.knowledge-selected-eyebrow { margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }.knowledge-selected-heading { display: flex; align-items: center; gap: 10px; }.knowledge-selected-heading h2 { margin: 0; color: var(--ink); font-size: 19px; line-height: 1.25; }.knowledge-selected-card > p { margin: 13px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }.knowledge-selected-body { max-height: 240px; margin: 15px 0; padding: 13px 14px; overflow: auto; border: 1px solid rgba(23,55,47,.1); border-radius: 6px; background: var(--paper); color: var(--text); font-size: 13px; line-height: 1.6; }.knowledge-selected-body p { margin: 0; }.knowledge-selected-body h2, .knowledge-selected-body h3, .knowledge-selected-body h4 { margin: 12px 0 5px; color: var(--ink); }.knowledge-selected-body li { margin-left: 18px; }.knowledge-grounded { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid rgba(53,110,85,.24); border-radius: 5px; background: rgba(228,236,223,.75); color: var(--green-800); font-size: 11px; font-weight: 700; }.knowledge-grounded i { width: 15px; }.knowledge-selected-card h3 { margin: 17px 0 8px; color: var(--ink); font-size: 12px; }.knowledge-source-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.knowledge-source-card { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; text-align: left; }.knowledge-source-card:hover { border-color: var(--line-strong); background: var(--sage-100); }.knowledge-source-card b, .knowledge-source-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.knowledge-source-card b { margin-top: 5px; font-size: 11px; }.knowledge-source-card small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.knowledge-type, .knowledge-status, .knowledge-access { display: inline-flex; align-items: center; width: fit-content; gap: 4px; border-radius: 4px; font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap; }.knowledge-type, .knowledge-status { padding: 4px 6px; }.knowledge-type i, .knowledge-status i, .knowledge-access i { width: 13px; height: 13px; }.knowledge-type.sop { color: #6d4ca9; background: #f0ebff; }.knowledge-type.template { color: #205d9d; background: #e6f0ff; }.knowledge-type.note { color: #956712; background: #fff3dc; }.knowledge-type.video { color: #2f6b51; background: #e4f3e7; }.knowledge-type.transcript { color: #23727a; background: #e2f6f5; }.knowledge-status.verified { color: var(--green-800); background: #eaf4e8; }.knowledge-status.needs_review { color: #956712; background: #fff3dc; }.knowledge-status.draft { color: #58636b; background: #edf0f1; }
.knowledge-recommendations { margin-top: 23px; }.knowledge-recommendations h2 { margin: 0 0 10px; color: var(--ink); font-size: 13px; }.knowledge-result-table { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.86); }.knowledge-result-row { width: 100%; min-height: 57px; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 79px minmax(150px, 1fr) 115px 103px 94px; gap: 8px; align-items: center; background: transparent; text-align: left; }.knowledge-result-row:last-child { border-bottom: 0; }.knowledge-result-row:hover { background: var(--sage-100); }.knowledge-result-title { min-width: 0; display: grid; gap: 2px; }.knowledge-result-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 12px; }.knowledge-result-title small { color: var(--muted); font-size: 10px; }.knowledge-result-owner { display: flex; align-items: center; gap: 5px; overflow: hidden; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }.knowledge-result-owner i { width: 15px; }.knowledge-result-row time { color: var(--muted); font-size: 10px; }.knowledge-no-results { padding: 22px; text-align: center; }
.knowledge-detail-drawer-open { overflow: hidden; }.knowledge-drawer-overlay { position: fixed; z-index: 100; inset: 0; display: flex; justify-content: flex-end; }.knowledge-drawer-backdrop { position: absolute; inset: 0; background: rgba(var(--green-900-rgb), .42); backdrop-filter: blur(3px); }.knowledge-drawer { position: relative; z-index: 1; width: min(660px, 100vw); height: 100%; display: flex; flex-direction: column; border-left: 1px solid var(--line-strong); background: var(--paper); box-shadow: -18px 0 44px rgba(var(--green-900-rgb), .2); animation: knowledge-drawer-in .18s ease-out; }.knowledge-drawer > header { flex: 0 0 auto; min-height: 68px; padding: 0 19px 0 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }.knowledge-drawer > header h2 { margin: 0; color: var(--ink); font-size: 16px; }.knowledge-drawer-body { min-height: 0; flex: 1 1 auto; padding: 22px 25px 26px; overflow: auto; }.knowledge-drawer-body > h1 { margin: 14px 0 8px; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 500; line-height: 1.16; }.knowledge-breadcrumb { margin: 0; color: var(--muted); font-size: 12px; }.knowledge-drawer-summary { margin: 18px 0 15px; color: var(--text); font-size: 13px; line-height: 1.55; }.knowledge-drawer-rule { height: 1px; margin: 16px 0; background: var(--line); }.knowledge-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; margin: 0; }.knowledge-meta-grid div { min-width: 0; }.knowledge-meta-grid dt { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: var(--muted); font-size: 11px; }.knowledge-meta-grid dt i { width: 15px; }.knowledge-meta-grid dd { margin: 0 0 0 22px; color: var(--text); font-size: 11px; }.knowledge-drawer-body h3 { margin: 0 0 8px; color: var(--ink); font-size: 13px; }.knowledge-drawer-body > p:not(.knowledge-breadcrumb):not(.knowledge-drawer-summary), .knowledge-article-body { margin: 0; color: var(--text); font-size: 12px; line-height: 1.55; }.knowledge-resources { display: grid; gap: 8px; }.knowledge-resource { padding: 9px; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }.knowledge-resource:hover { background: var(--sage-100); }.knowledge-resource > i { width: 16px; color: var(--blue); }.knowledge-resource > i:last-child { margin-left: auto; color: var(--muted); }.knowledge-resource span { min-width: 0; flex: 1; display: grid; gap: 2px; }.knowledge-resource b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.knowledge-resource small { color: var(--muted); font-size: 9px; }.knowledge-access { padding: 5px 7px; border: 1px solid rgba(53,110,85,.22); background: #eef6eb; color: var(--green-800); }.knowledge-permission-copy { margin-top: 9px !important; color: var(--muted) !important; font-size: 11px !important; } @keyframes knowledge-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.knowledge-ai-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; }.knowledge-ai-backdrop { position: absolute; inset: 0; background: rgba(16,36,30,.42); }.knowledge-ai-modal { position: relative; z-index: 1; width: min(680px, 100%); max-height: min(840px, calc(100vh - 44px)); overflow: auto; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); box-shadow: var(--shadow); }.knowledge-ai-modal > header { padding: 20px 22px 15px; display: flex; align-items: start; justify-content: space-between; border-bottom: 1px solid var(--line); }.knowledge-ai-modal > header h2 { margin: 2px 0 0; color: var(--ink); font-size: 20px; }.knowledge-ai-modal form { display: grid; gap: 15px; padding: 20px 22px 22px; }.knowledge-ai-modal textarea { min-height: 130px; resize: vertical; }.knowledge-ai-modal .knowledge-draft-body { min-height: 300px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; }.knowledge-safe-confirm { display: flex; align-items: start; grid-template-columns: auto 1fr; gap: 8px; }.knowledge-safe-confirm input { min-width: auto; margin-top: 3px; accent-color: var(--green-800); }.knowledge-ai-note { display: flex; align-items: start; gap: 7px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }.knowledge-ai-note i { flex: 0 0 auto; width: 16px; color: var(--green); }.knowledge-ai-modal .button-row { display: flex; align-items: center; gap: 8px; }.knowledge-ai-modal .status-line { color: var(--muted); font-size: 12px; }
.knowledge-create-overlay { position: fixed; z-index: 100; inset: 0; pointer-events: none; }
.knowledge-create-backdrop { position: absolute; inset: 0; background: rgba(16,36,30,.42); pointer-events: auto; }
.knowledge-create-drawer { position: absolute; z-index: 1; top: 0; right: 0; display: flex; flex-direction: column; width: min(660px, 100%); height: 100%; overflow: hidden; border-left: 1px solid var(--line-strong); background: var(--paper); box-shadow: -12px 0 32px rgba(var(--green-900-rgb), .16); pointer-events: auto; }
.knowledge-create-drawer > header { flex: 0 0 auto; min-height: 68px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.knowledge-create-drawer > header h2 { margin: 2px 0 0; color: var(--ink); font-size: 20px; }
.knowledge-create-drawer form { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 15px; padding: 20px 22px 28px; }
.knowledge-create-drawer textarea { min-height: 110px; resize: vertical; }
.knowledge-create-drawer .knowledge-draft-body { min-height: 260px; }
.knowledge-create-drawer .button-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.knowledge-create-drawer .knowledge-edit-actions { justify-content: space-between; }
.knowledge-create-drawer .knowledge-edit-actions-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.knowledge-create-drawer .knowledge-edit-actions { position: relative; }
.knowledge-create-drawer .knowledge-edit-actions .status-line { position: absolute; left: 50%; transform: translateX(-50%); }
.knowledge-create-drawer .status-line { color: var(--muted); font-size: 12px; }
.knowledge-group-access { margin: 0; padding: 0; border: 0; }.knowledge-group-access legend { margin-bottom: 5px; color: var(--ink); font-size: 12px; font-weight: 700; }.knowledge-group-access > p { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.4; }.knowledge-group-options { display: grid; gap: 6px; }.knowledge-group-option { display: flex !important; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.72); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }.knowledge-group-option input { min-width: auto; margin: 0; accent-color: var(--green-800); }.knowledge-group-option:has(input:checked) { border-color: var(--green-800); background: var(--sage-200); color: var(--green-900); }
.knowledge-category-icon-picker { margin: 0; padding: 0; border: 0; }.knowledge-category-icon-picker legend { margin-bottom: 8px; color: var(--ink); font-size: 12px; font-weight: 700; }.knowledge-category-icon-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }.knowledge-category-icon-option { position: relative; min-height: 66px; display: grid; place-items: center; gap: 3px; padding: 6px 4px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.7); color: var(--muted); cursor: pointer; text-align: center; }.knowledge-category-icon-option input { position: absolute; opacity: 0; pointer-events: none; }.knowledge-category-icon-option i { width: 19px; }.knowledge-category-icon-option span { font-size: 10px; line-height: 1.1; }.knowledge-category-icon-option:has(input:checked) { border-color: var(--green-800); background: var(--sage-200); color: var(--green-900); box-shadow: inset 0 0 0 1px var(--green-800); }

/* The home screen is deliberately a library, not an AI answer. A submitted
   question switches to the answer-first layout below; browsing stays dense
   enough to scan and manage company knowledge at a glance. */
.knowledge-search { margin: 0; }
.knowledge-filter-wrap { position: relative; flex: 0 0 auto; }
.knowledge-filter-toggle { min-height: 46px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.knowledge-filter-toggle i { width: 16px; }
.knowledge-filter-popover { position: absolute; z-index: 8; top: calc(100% + 7px); right: 0; width: 190px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); box-shadow: var(--soft-shadow); }
.knowledge-filter-popover label { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: var(--text); font-size: 12px; font-weight: 600; }
.knowledge-filter-popover input { min-width: auto; accent-color: var(--green-800); }
.knowledge-filter-popover button { width: 100%; padding: 7px 8px; border: 0; border-radius: 4px; background: var(--sage-100); color: var(--green-800); font: inherit; font-size: 11px; font-weight: 700; text-align: left; }
.knowledge-library { min-width: 0; }
.knowledge-library-toolbar { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; font-weight: 700; }
.knowledge-view-buttons { display: inline-flex; align-items: center; gap: 3px; }
.knowledge-view-buttons .icon-button { width: 31px; height: 31px; color: var(--muted); }
.knowledge-view-buttons .icon-button.active { border-color: var(--line-strong); background: var(--sage-100); color: var(--green-900); }
.knowledge-view-buttons .icon-button:disabled { opacity: .45; cursor: not-allowed; }
.knowledge-library-table { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.72); }
.knowledge-library-head, .knowledge-library-row { display: grid; grid-template-columns: max-content minmax(190px, 1fr) 150px 128px 104px; gap: 10px; align-items: center; }
.knowledge-library-head { min-height: 39px; padding: 0 11px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.knowledge-library-head span:last-child { display: inline-flex; align-items: center; gap: 3px; }.knowledge-library-head i { width: 13px; }
.knowledge-library-row { width: 100%; min-height: 62px; padding: 8px 11px; border: 0; border-radius: 0 !important; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; }
.knowledge-library-row:last-child { border-bottom: 0; }.knowledge-library-row:hover { background: var(--sage-100); }
.knowledge-library-title { min-width: 0; display: grid; gap: 3px; }.knowledge-library-title b { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.knowledge-library-title small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.knowledge-library-category { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-library-owner { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.knowledge-library-owner i { flex: 0 0 auto; width: 15px; color: var(--muted); }.knowledge-library-row time { color: var(--muted); font-size: 10px; }
/* `overflow: hidden` is required for long titles to ellipsize. Give its
   text line enough room for descenders such as g, p, q, and y first. */
.knowledge-result-title b,
.knowledge-library-title b { display: block; padding-block: 1px; line-height: 1.35; }
.knowledge-question-card { padding: 17px 19px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.82); }.knowledge-question-card > span { color: var(--muted); font-size: 11px; font-weight: 700; }.knowledge-question-card h2 { margin: 6px 0 0; color: var(--ink); font-size: 16px; line-height: 1.4; }
.knowledge-answer-column { display: grid; gap: 10px; }
/* The portal navigation and source drawer are both persistent at desktop
   widths. Keep the library's essential status fields visible in that real
   available column, rather than sizing against the full browser viewport. */
@media (max-width: 1600px) { .knowledge-library-head, .knowledge-library-row { grid-template-columns: max-content minmax(140px, 1fr) 130px 90px; column-gap: 12px; row-gap: 8px; }.knowledge-library-owner, .knowledge-library-head span:nth-child(4) { display: none; } }
/* Knowledge keeps the shared portal navigation geometry; only its content
   surface and source drawer need page-specific sizing. */
@media (min-width: 1051px) {
  .dashboard-body:has(.knowledge-hub) .app-main { padding: 28px 26px 0; }
  .dashboard-body:has(.knowledge-hub) .knowledge-hub { min-height: calc(100vh - 92px); border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .dashboard-body:has(.knowledge-hub) .knowledge-hub-main { padding: 0; }
  .dashboard-body:has(.knowledge-hub) .knowledge-command-bar { margin-bottom: 14px; }
  .dashboard-body:has(.knowledge-hub) .knowledge-drawer { width: min(660px, 100vw); }
}
@media (min-width: 1341px) {
  .dashboard-body:has(.knowledge-hub) .knowledge-library-head,
  .dashboard-body:has(.knowledge-hub) .knowledge-library-row { grid-template-columns: max-content minmax(190px, 1fr) 150px 128px 104px; gap: 10px; }
  .dashboard-body:has(.knowledge-hub) .knowledge-library-owner { display: flex; }
  .dashboard-body:has(.knowledge-hub) .knowledge-library-head span:nth-child(3) { display: inline-flex; }
}
@media (max-width: 1280px) { .knowledge-drawer, .knowledge-create-drawer { width: min(390px, 100vw); }.knowledge-result-row { grid-template-columns: 76px minmax(130px, 1fr) 96px 95px; }.knowledge-result-owner { display: none; } }

.knowledge-drawer-title-row { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; }
.knowledge-drawer-title-row h1 { min-width: 0; flex: 1 1 auto; margin: 0; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 500; line-height: 1.16; }
.knowledge-drawer-title-row .knowledge-type { flex: 0 0 auto; }
.knowledge-drawer-title-row .icon-button { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; }
.knowledge-drawer-body { padding-top: 14px; }
.knowledge-drawer-title-row { margin-top: 4px; }
.knowledge-drawer > header { border-bottom: 0; }
.knowledge-drawer-title-row + .knowledge-drawer-rule { display: none !important; }
.knowledge-drawer-body > .knowledge-article-heading { margin-top: 20px; }
.knowledge-meta-grid .knowledge-owner-label { display: none; }
.knowledge-meta-grid > div:first-child dd { margin-left: 0; }
.knowledge-drawer-body h3 { font-size: 14px; }
.knowledge-meta-grid > div:first-child dd { display: flex; align-items: center; gap: 7px; }
.knowledge-meta-grid > div:first-child dd i { width: 15px; height: 15px; color: var(--muted); }
.knowledge-attach-media { width: fit-content; margin-top: 4px; }
.knowledge-attach-media i { width: 15px; }
.knowledge-resources > .muted { margin: 0; padding: 9px; }
.knowledge-drive-picker-overlay { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; }
.knowledge-drive-picker-backdrop { position: absolute; inset: 0; background: rgba(16,36,30,.48); backdrop-filter: blur(2px); }
.knowledge-drive-picker { position: relative; z-index: 1; width: min(570px, 100%); max-height: min(720px, calc(100vh - 40px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); box-shadow: var(--shadow); }
.knowledge-drive-picker > header { min-height: 70px; padding: 0 18px 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.knowledge-drive-picker > header h2 { margin: 2px 0 0; color: var(--ink); font-size: 20px; }
.knowledge-drive-picker > header .eyebrow { margin: 0; }
.knowledge-drive-browser { min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; }
.knowledge-drive-toolbar { min-height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.knowledge-drive-toolbar .icon-button { width: 32px; height: 32px; }
.knowledge-drive-list { min-height: 240px; max-height: 430px; padding: 8px; overflow-y: auto; }
.knowledge-drive-item { width: 100%; min-height: 52px; padding: 7px 10px; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text); text-align: left; }
.knowledge-drive-item:hover { background: var(--sage-100); }
.knowledge-drive-item.selected { border-color: var(--green-800); background: var(--sage-200); }
.knowledge-drive-item > i { flex: 0 0 auto; width: 19px; color: var(--green-800); }
.knowledge-drive-item > i:last-child { margin-left: auto; width: 16px; color: var(--muted); }
.knowledge-drive-item span { min-width: 0; flex: 1; display: grid; gap: 3px; }
.knowledge-drive-item b, .knowledge-drive-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-drive-item b { color: var(--ink); font-size: 12px; }
.knowledge-drive-item small { color: var(--muted); font-size: 10px; }
.knowledge-drive-loading { padding: 24px 12px; text-align: center; }
.knowledge-drive-picker > footer { min-height: 68px; padding: 12px 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.knowledge-drive-picker > footer .status-line { min-width: 0; flex: 1 1 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1050px) { .knowledge-hub { display: block; }.knowledge-workspace { grid-template-columns: 175px minmax(0, 1fr); } }
@media (min-width: 721px) and (max-width: 1050px) {
  .knowledge-library-head, .knowledge-library-row { grid-template-columns: max-content minmax(0, 1fr) 110px 68px; gap: 8px; }
}
@media (max-width: 720px) { .knowledge-hub-main { padding: 14px; }.knowledge-command-bar { flex-wrap: wrap; }.knowledge-search { flex-basis: 100%; }.knowledge-ai-create { margin-left: auto; }.topbar-heading-row .knowledge-search { flex: 1 1 100%; min-width: 0; order: 3; }.knowledge-workspace { grid-template-columns: 1fr; }.knowledge-categories { display: flex; gap: 4px; overflow: auto; }.knowledge-categories h2, .knowledge-category-rule, .knowledge-categories .knowledge-category:nth-of-type(n+6) { display: none; }.knowledge-category { width: auto; min-width: max-content; }.knowledge-category b { display: none; }.knowledge-source-cards { grid-template-columns: 1fr; }.knowledge-result-row { grid-template-columns: 76px minmax(0,1fr) 95px; }.knowledge-result-row time { display: none; }.knowledge-library-head { display: none; }.knowledge-library-row { grid-template-columns: 76px minmax(0,1fr) 92px; }.knowledge-library-row .knowledge-library-owner, .knowledge-library-row time { display: none; }.knowledge-filter-popover { right: auto; left: 0; }.knowledge-drawer, .knowledge-question-drawer { width: 100vw; border-left: 0; }.knowledge-meta-grid { grid-template-columns: 1fr; }.knowledge-ai-modal .button-row { flex-wrap: wrap; } }

/* The phone has no room for desktop's persistent category rail. Keep search
   directly over the article list and present the same categories in an
   intentional bottom sheet when Filter is tapped. */
@media (max-width: 720px) {
  body[data-mobile-navigation="bottom"].knowledge-view .knowledge-command-bar {
    flex-wrap: nowrap;
    align-items: stretch;
  }

  body[data-mobile-navigation="bottom"].knowledge-view .knowledge-command-bar .knowledge-search {
    min-width: 0;
    flex: 1 1 auto;
    flex-basis: auto;
  }

  body[data-mobile-navigation="bottom"].knowledge-view .knowledge-mobile-filter {
    min-width: 0;
    min-height: 46px;
    padding-inline: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  body[data-mobile-navigation="bottom"].knowledge-view .knowledge-mobile-filter i,
  body[data-mobile-navigation="bottom"].knowledge-view .knowledge-mobile-filter svg {
    width: 16px;
    height: 16px;
  }

  body[data-mobile-navigation="bottom"].knowledge-view .knowledge-categories {
    display: none;
  }

  body[data-mobile-navigation="bottom"] .mobile-view-actions #knowledgeAddNew {
    width: auto;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding-inline: 12px;
    border-color: var(--green-800);
    background: var(--green-800);
    color: var(--white);
    font-size: 13px;
    white-space: nowrap;
  }

  body[data-mobile-navigation="bottom"] .mobile-view-actions #knowledgeAddNew i,
  body[data-mobile-navigation="bottom"] .mobile-view-actions #knowledgeAddNew svg {
    color: var(--white);
  }

  body[data-mobile-navigation="bottom"] .knowledge-filter-sheet-backdrop {
    position: fixed;
    z-index: 900;
    inset: 0;
    background: rgba(var(--ink-rgb), 0.28);
    backdrop-filter: blur(2px);
  }

  body[data-mobile-navigation="bottom"] .knowledge-filter-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 901;
    display: flex;
    flex-direction: column;
    width: auto;
    max-height: min(76dvh, 620px);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: var(--paper);
    box-shadow: 0 -20px 56px rgba(var(--ink-rgb), 0.22);
    animation: mobile-bottom-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
  }

  body[data-mobile-navigation="bottom"] .knowledge-filter-sheet::before {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
    content: "";
    transform: translateX(-50%);
  }

  body[data-mobile-navigation="bottom"] .knowledge-filter-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 28px 1.25rem 1.15rem;
    border-bottom: 1px solid var(--line-strong);
    touch-action: none;
  }

  body[data-mobile-navigation="bottom"] .knowledge-filter-sheet-header h2 {
    margin: 0.2rem 0 0;
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1.3;
  }

  body[data-mobile-navigation="bottom"] .knowledge-filter-sheet-body {
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  body[data-mobile-navigation="bottom"] .knowledge-filter-category-list {
    display: grid;
    gap: 7px;
  }

  body[data-mobile-navigation="bottom"] .knowledge-filter-category-list .knowledge-category {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 12px;
  }

  body[data-mobile-navigation="bottom"] .knowledge-filter-category-list .knowledge-category b {
    display: inline;
  }

  body[data-mobile-navigation="bottom"]:has(.knowledge-filter-sheet) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body[data-mobile-navigation="bottom"] .knowledge-filter-sheet.knowledge-filter-sheet-dragging {
    transition: none;
    animation: none;
  }

  body[data-mobile-navigation="bottom"] .knowledge-filter-sheet.knowledge-filter-sheet-closing {
    pointer-events: none;
    animation: mobile-bottom-sheet-out 0.26s cubic-bezier(0.4, 0, 1, 1) forwards;
  }

  body[data-mobile-navigation="bottom"] .knowledge-filter-sheet-backdrop.knowledge-filter-sheet-closing {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.24s ease;
  }
}
@media (max-width: 720px) { .knowledge-library-row { grid-template-columns: max-content minmax(0,1fr) 92px; } }


/* --- Finances: the merged books / billing / banking tab ------------------- */

.finance-nav {
  margin-bottom: 18px;
}

.finance-shell .card + .card {
  margin-top: 16px;
}

.finance-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.finance-mode-line {
  margin: 0 0 14px;
}

/* A setup gap is stated, not implied by a screen of zeros -- a portal with no
   Stripe key and a business with no revenue look identical otherwise. */
.finance-setup-notice {
  border-left: 3px solid var(--blue, #5f7f96);
}

.finance-setup-notice ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

/* Bank transactions post automatically, so anything the software guessed at has
   to read as a number demanding attention rather than a quiet footnote. */
.finance-attention {
  border-left: 3px solid var(--coral, #9c5d45);
}

.finance-attention h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}

.finance-attention h3 i {
  height: 18px;
  width: 18px;
}

.finance-card.attention .value {
  color: var(--coral, #9c5d45);
}

.finance-card .muted {
  margin: 2px 0 0;
  font-size: 12px;
}

/* Statement structure. Sub-heads and subtotals carry the shape of a printed
   statement, which is what makes one scannable. */
.finance-shell .finance-section-head th {
  padding-top: 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.finance-shell .finance-subtotal th {
  border-top: 1px solid var(--line);
  font-weight: 780;
}

.finance-shell .finance-total th {
  border-top: 2px solid var(--ink, #1f262c);
  border-bottom: 3px double var(--ink, #1f262c);
  font-weight: 800;
}

.finance-shell .finance-total .muted,
.finance-shell .finance-subtotal .muted {
  margin-left: 8px;
  font-weight: 600;
}

.finance-proof-ok {
  margin: 10px 0 0;
  color: var(--green, #356e55);
  font-weight: 700;
}

/* The journal renders entry rows with their lines indented beneath, so a
   balanced pair reads as one thing rather than two unrelated rows. */
.finance-journal .finance-entry-row td,
.finance-journal .finance-entry-row th {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.finance-journal .finance-line-row td {
  border-top: none;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.8);
}

.finance-journal .finance-line-account {
  padding-left: 18px;
}

/* A reversed entry is struck through rather than hidden: the record of what the
   books said before the correction is the reason to reverse instead of edit. */
.finance-journal .reversed td {
  opacity: 0.55;
  text-decoration: line-through;
}

.finance-error-row td {
  padding-top: 0;
  color: var(--coral, #9c5d45);
  font-size: 13px;
}

.finance-shell .secondary-btn.sm,
.finance-shell .primary-btn.sm {
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
}

.finance-shell .row-actions {
  text-align: right;
  white-space: nowrap;
}

.finance-shell .row-actions > * + * {
  margin-left: 4px;
}

.finance-form {
  display: grid;
  gap: 12px;
}

.finance-form .data-table input,
.finance-form .data-table select {
  width: 100%;
}

.finance-form .button-row {
  display: flex;
  gap: 8px;
}

/* Money columns line up only if the digits do. */
.finance-shell .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}


.finance-draft-editor > td {
  background: rgba(var(--ink-rgb), 0.03);
  padding: 12px 16px;
}

.finance-draft-editor .data-table input {
  width: 100%;
}

.finance-draft-editor .finance-new-item input {
  border-style: dashed;
}

.finance-draft-editor p.muted {
  margin: 8px 0 0;
}

/* Provider compensation is intentionally a calm review surface: owners can
   see the money chain and its exceptions without mistaking a prepared
   instruction for a completed payout. */
.provider-payouts-shell { display: grid; gap: 16px; }
.provider-payouts-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 2px 2px 4px; }
.provider-payouts-hero h2 { margin: 3px 0 7px; color: var(--ink); font-size: clamp(22px, 2vw, 29px); font-weight: 600; letter-spacing: -0.02em; }
.provider-payouts-hero p { max-width: 690px; margin: 0; line-height: 1.5; }
.provider-payouts-hero-badge { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 8px 11px; border: 1px solid rgba(53,110,85,.24); border-radius: 999px; background: rgba(228,236,223,.78); color: var(--green-800, #245744); font-size: 11px; font-weight: 800; }
.provider-payouts-hero-badge i { width: 15px; height: 15px; }
.provider-payouts-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 16px 18px; }
.provider-payouts-period-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.provider-payouts-period-fields label { display: grid; gap: 5px; min-width: 145px; margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.provider-payouts-period-fields input { min-height: 38px; }
.provider-payouts-toolbar .button-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.provider-payouts-toolbar .button-row button { white-space: nowrap; }
.provider-payouts-toolbar-note { flex: 1 1 100%; margin: 0; font-size: 11px; }
.provider-payout-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.provider-payout-stat { min-width: 0; padding: 16px 17px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.75); box-shadow: 0 3px 12px rgba(var(--green-900-rgb), .035); }
.provider-payout-stat.is-alert { border-color: rgba(156,93,69,.34); background: rgba(255,247,242,.82); }
.provider-payout-stat-label, .provider-payout-stat small { display: block; color: var(--muted); font-size: 11px; }
.provider-payout-stat strong { display: block; margin: 7px 0 3px; color: var(--ink); font-size: clamp(20px, 2vw, 27px); font-weight: 650; font-variant-numeric: tabular-nums; }
.provider-payout-stat small { line-height: 1.35; }
.provider-payouts-two-column { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr); gap: 16px; }
.provider-payouts-section { min-width: 0; padding: 18px; }
.provider-payouts-section.is-alert { border-left: 3px solid var(--coral, #9c5d45); }
.provider-payouts-section.provider-payouts-reconciliation.is-good { border-left: 3px solid var(--green, #356e55); }
.provider-payouts-reconciliation-issues { display: grid; gap: 8px; margin: 14px 0 0; padding: 12px 14px 12px 29px; border: 1px solid rgba(156,93,69,.2); border-radius: 8px; background: rgba(250,239,234,.52); color: var(--text); font-size: 12px; }
.provider-payouts-reconciliation-issues li { display: grid; gap: 2px; }
.provider-payouts-reconciliation-issues li strong { color: var(--coral, #884935); font-size: 11px; text-transform: capitalize; }
.provider-payouts-reconciliation-clear { margin: 14px 0 0; font-size: 12px; }
.provider-payouts-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.provider-payouts-section-heading h3 { margin: 3px 0 0; color: var(--ink); font-size: 17px; }
.provider-payouts-section-heading > .muted { padding-top: 4px; font-size: 11px; }
.provider-payouts-lock { width: 19px; height: 19px; color: var(--green-800, #245744); }
.provider-payouts-help, .provider-payouts-boundary { margin: 0 0 13px; font-size: 12px; line-height: 1.5; }
.provider-payouts-boundary { color: var(--text); }
.provider-payouts-checklist { display: grid; gap: 10px; margin: 15px 0 0; padding: 0; list-style: none; }
.provider-payouts-checklist li { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.provider-payouts-checklist i { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: var(--green, #356e55); }
.provider-payout-status { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap; }
.provider-payout-status.is-good { background: rgba(53,110,85,.13); color: var(--green-800, #245744); }
.provider-payout-status.is-progress { background: rgba(95,127,150,.14); color: var(--blue, #5f7f96); }
.provider-payout-status.is-danger { background: rgba(156,93,69,.14); color: var(--coral, #9c5d45); }
.provider-payout-status.is-neutral { background: rgba(100,105,106,.12); color: var(--muted); }
.provider-payout-subtext { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.provider-payout-inline-good, .provider-payout-inline-warning, .provider-payout-exception { font-size: 11px; line-height: 1.35; }
.provider-payout-inline-good { color: var(--green-800, #245744); font-weight: 700; }
.provider-payout-inline-warning, .provider-payout-exception { color: var(--coral, #9c5d45); }
.provider-payout-exception-detail { margin-top: 7px; padding: 7px 9px; border: 1px solid rgba(95,127,150,.2); border-left: 3px solid var(--blue, #5f7f96); background: rgba(245,248,249,.8); color: var(--text); }
.provider-payout-exception-detail summary { cursor: pointer; color: var(--blue, #5f7f96); font-size: 11px; font-weight: 800; }
.provider-payout-exception-detail p { margin: 5px 0 0; font-size: 11px; line-height: 1.4; }
.provider-payout-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.provider-payout-summary-grid > div { min-width: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.62); }
.provider-payout-summary-grid strong, .provider-payout-summary-grid small { display: block; }
.provider-payout-summary-grid strong { color: var(--ink); font-size: 18px; font-variant-numeric: tabular-nums; }
.provider-payout-summary-grid small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.provider-payouts-section .table-scroll { overflow-x: auto; }
.provider-payouts-section .data-table { min-width: 620px; }
.provider-payouts-section .data-table td, .provider-payouts-section .data-table th { vertical-align: top; }
.provider-payout-diagnostics .data-table { min-width: 840px; }
.provider-payout-diagnostics .data-table td, .provider-payout-diagnostics .data-table th { vertical-align: top; }
.provider-compensation-rules { border-top: 3px solid var(--green, #356e55); }
.provider-compensation-rule-editor { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 13px; }
.provider-compensation-rule-editor summary { cursor: pointer; color: var(--green-800, #245744); font-size: 12px; font-weight: 800; }
.provider-compensation-rule-form { display: grid; gap: 14px; margin-top: 15px; }
.provider-compensation-rule-grid, .provider-compensation-policy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.provider-compensation-rule-form label { display: grid; gap: 5px; margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.provider-compensation-rule-form input, .provider-compensation-rule-form select, .provider-compensation-rule-form textarea { width: 100%; min-height: 38px; }
.provider-compensation-rule-form textarea { resize: vertical; }
.provider-compensation-rule-form fieldset { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.provider-compensation-rule-form legend { padding: 0 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.provider-compensation-rule-blockers { margin: 0; padding: 10px 12px; border-left: 3px solid var(--blue, #5f7f96); background: rgba(95,127,150,.07); }
.provider-payouts-loading, .provider-payouts-error { padding: 24px; }
.provider-payouts-error h2 { margin: 0 0 7px; color: var(--ink); font-size: 18px; }
.provider-payouts-error p { margin: 0 0 14px; }
@media (max-width: 640px) {
  .provider-payout-summary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .provider-compensation-rule-grid, .provider-compensation-policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .provider-compensation-rule-grid, .provider-compensation-policy-grid { grid-template-columns: 1fr; }
}

.cutover-staging-dashboard { display: grid; gap: 16px; }
.cutover-staging-hero { padding: 22px; }
.cutover-staging-heading, .cutover-staging-dashboard .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cutover-staging-heading h2, .cutover-staging-dashboard .section-heading h3 { margin: 3px 0 7px; color: var(--ink); }
.cutover-staging-heading p { max-width: 700px; margin: 0; line-height: 1.5; }
.cutover-staging-heading .status-pill { flex: 0 0 auto; }
.cutover-staging-safeguard { margin: 18px 0; padding: 11px 13px; border: 1px solid rgba(95,127,150,.2); border-radius: 7px; background: rgba(95,127,150,.08); color: var(--text); font-size: 12px; line-height: 1.45; }
.cutover-staging-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cutover-staging-metrics > div { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.62); }
.cutover-staging-metrics span, .cutover-staging-metrics small { display: block; color: var(--muted); font-size: 11px; }
.cutover-staging-metrics strong { display: block; margin: 6px 0 3px; color: var(--ink); font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cutover-staging-metrics small { line-height: 1.35; }
.cutover-staging-progress { height: 7px; overflow: hidden; border-radius: 99px; background: var(--sage-100); }
.cutover-staging-progress span { display: block; height: 100%; border-radius: inherit; background: var(--green-700); transition: width .2s ease; }
.cutover-staging-blockers { margin-top: 16px; padding: 13px 15px; border-left: 3px solid var(--coral); background: rgba(156,93,69,.07); color: var(--text); font-size: 12px; }
.cutover-staging-blockers strong { color: var(--coral); }
.cutover-staging-blockers ul { margin: 7px 0 0; padding-left: 18px; }
.cutover-staging-dashboard .card:not(.cutover-staging-hero) { padding: 18px; }
.cutover-staging-dashboard .section-heading { margin-bottom: 12px; }
.cutover-staging-dashboard .section-heading h3 { font-size: 17px; }
.cutover-staging-dashboard .data-table { min-width: 680px; }
.cutover-staging-dashboard .data-table td, .cutover-staging-dashboard .data-table th { vertical-align: top; }
.cutover-staging-dashboard .status-pill { display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.cutover-staging-dashboard .status-pill.success { background: rgba(53,110,85,.13); color: var(--green-800); }
.cutover-staging-dashboard .status-pill.warning { background: rgba(185,154,82,.16); color: var(--amber); }
@media (max-width: 800px) { .cutover-staging-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cutover-staging-heading, .cutover-staging-dashboard .section-heading { flex-direction: column; } .cutover-staging-metrics { grid-template-columns: 1fr; } .cutover-staging-hero, .cutover-staging-dashboard .card:not(.cutover-staging-hero) { padding: 15px; } }

.operational-report-dashboard { display: grid; gap: 14px; margin-bottom: 16px; }
.operational-report-hero, .operational-report-provider, .operational-report-boundaries { padding: 18px; }
.operational-report-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.operational-report-heading h2, .operational-report-heading h3 { margin: 3px 0 5px; color: var(--ink); }
.operational-report-heading p { margin: 0; }
.operational-report-boundary { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: rgba(53,110,85,.12); color: var(--green-800); font-size: 10px; font-weight: 800; }
.operational-report-currency { margin: 15px 0; padding: 10px 12px; border-left: 3px solid var(--blue); background: rgba(95,127,150,.08); color: var(--text); font-size: 11px; line-height: 1.45; }
.operational-report-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.operational-report-stat { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.62); }
.operational-report-stat span, .operational-report-stat small { display: block; color: var(--muted); font-size: 11px; }
.operational-report-stat strong { display: block; margin: 6px 0 3px; color: var(--ink); font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
.operational-report-stat em { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; font-style: normal; line-height: 1.35; }
.operational-report-provider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 11px; }
.operational-report-provider-grid > div { padding: 11px; border: 1px solid var(--line); border-radius: 7px; }
.operational-report-provider-grid span { display: block; color: var(--muted); font-size: 11px; }
.operational-report-provider-grid strong { display: block; margin-top: 5px; color: var(--ink); font-size: 18px; font-variant-numeric: tabular-nums; }
.operational-report-exceptions { margin-top: 13px; padding: 11px 13px; border-left: 3px solid var(--coral, #9c5d45); background: rgba(250,239,234,.52); }
.operational-report-exceptions h4 { margin: 0 0 7px; color: var(--ink); font-size: 12px; }
.operational-report-exceptions ul { display: grid; gap: 6px; margin: 0; padding-left: 17px; color: var(--text); font-size: 11px; }
.operational-report-exceptions li { padding-left: 2px; }
.operational-report-exceptions strong { display: block; color: var(--coral, #884935); text-transform: capitalize; }
.operational-report-exceptions span { display: block; margin-top: 2px; line-height: 1.35; }
.operational-report-boundaries h3 { margin: 0 0 8px; color: var(--ink); font-size: 16px; }
.operational-report-boundaries ul { margin: 0 0 10px; padding-left: 18px; color: var(--coral); font-size: 12px; }
.owner-reporting-detail { display: grid; gap: 14px; }
.owner-reporting-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.owner-reporting-stat-grid > div { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.62); }
.owner-reporting-stat-grid span, .owner-reporting-stat-grid small { display: block; color: var(--muted); font-size: 11px; }
.owner-reporting-stat-grid strong { display: block; margin: 6px 0 3px; color: var(--ink); font-size: 19px; font-variant-numeric: tabular-nums; }
.owner-reporting-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.owner-reporting-columns > div { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 7px; }
.owner-reporting-columns h4 { margin: 0 0 9px; color: var(--ink); font-size: 14px; }
.owner-reporting-dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.owner-reporting-dl div { padding: 8px; border-radius: 6px; background: rgba(95,127,150,.08); }
.owner-reporting-dl dt { color: var(--muted); font-size: 10px; }
.owner-reporting-dl dd { margin: 3px 0 0; color: var(--ink); font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.owner-reporting-blockers { margin: 8px 0 0; padding-left: 18px; color: var(--coral); font-size: 11px; }
.owner-reporting-segments { min-width: 620px; }
.owner-reporting-segments caption { padding: 0 0 8px; color: var(--ink); font-size: 14px; font-weight: 650; text-align: left; }
@media (max-width: 800px) { .operational-report-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .owner-reporting-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .owner-reporting-columns { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .operational-report-heading { flex-direction: column; } .operational-report-stat-grid, .operational-report-provider-grid, .owner-reporting-stat-grid, .owner-reporting-dl { grid-template-columns: 1fr; } }

@media (max-width: 980px) {
  .provider-payouts-toolbar { align-items: stretch; flex-direction: column; }
  .provider-payouts-toolbar .button-row { justify-content: flex-start; }
  .provider-payout-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-payouts-two-column { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .provider-payouts-hero { flex-direction: column; }
  .provider-payouts-hero-badge { align-self: flex-start; }
  .provider-payouts-period-fields { display: grid; grid-template-columns: 1fr 1fr; }
  .provider-payouts-period-fields label { min-width: 0; }
  .provider-payout-stat-grid { grid-template-columns: 1fr; }
  .provider-payouts-section { padding: 14px; }
}

/* Shared user groups stay compact in Settings; membership is edited in a
   focused right drawer instead of expanding every group into a long form. */
.user-group-list { display: grid; gap: 8px; margin-top: 15px; }
.user-group-row { width: 100%; min-height: 58px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.5); color: var(--text); text-align: left; }
.user-group-row:hover { border-color: var(--line-strong); background: var(--sage-100); }
.user-group-row > span { min-width: 0; display: grid; gap: 3px; }
.user-group-row strong, .user-group-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-group-row strong { color: var(--ink); font-size: 13px; }
.user-group-row small { color: var(--muted); font-size: 11px; }
.user-group-row > i { flex: 0 0 auto; width: 17px; color: var(--muted); }
.user-group-drawer-open { overflow: hidden; }
.user-group-drawer-overlay { position: fixed; z-index: 90; inset: 0; display: flex; justify-content: flex-end; }
.user-group-drawer-backdrop { position: absolute; inset: 0; background: rgba(var(--green-900-rgb), .42); backdrop-filter: blur(3px); }
.user-group-drawer { position: relative; z-index: 1; width: min(520px, 100vw); height: 100%; display: flex; flex-direction: column; border-left: 1px solid var(--line-strong); background: var(--paper); box-shadow: -18px 0 44px rgba(var(--green-900-rgb), .2); animation: user-group-drawer-in .18s ease-out; }
.user-group-drawer > header { flex: 0 0 auto; min-height: 76px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.user-group-drawer header .eyebrow { margin: 0 0 3px; }
.user-group-drawer header h2 { margin: 0; color: var(--ink); font-size: 20px; }
.user-group-drawer form { min-height: 0; flex: 1 1 auto; overflow-y: auto; display: grid; align-content: start; gap: 16px; padding: 20px; }
.user-group-drawer form > label { display: grid; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 700; }
.user-group-drawer textarea { min-height: 92px; resize: vertical; }
.user-group-members { padding-top: 16px; border-top: 1px solid var(--line); }
.user-group-members-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.user-group-members-heading .eyebrow { margin: 0 0 3px; }
.user-group-members-heading h3 { margin: 0; color: var(--ink); font-size: 14px; }
.user-group-members-heading > .muted { max-width: 160px; font-size: 11px; line-height: 1.35; text-align: right; }
.user-group-drawer-actions { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.user-group-drawer-action-spacer { flex: 1; }
@keyframes user-group-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
html[data-theme="dark"] .user-group-row, html[data-theme="dark"] .user-group-drawer { background: rgba(var(--sage-100-rgb), .96); }
@media (max-width: 640px) { .user-group-drawer { width: 100vw; }.user-group-members-heading { align-items: start; flex-direction: column; }.user-group-members-heading > .muted { max-width: none; text-align: left; }.user-group-drawer .vault-user-checklist { grid-template-columns: 1fr; } }

/* Rendered article bodies (services/knowledge_render.py). Screenshots take
   their own line and never exceed the column; code and tables scroll inside
   their own box instead of widening the drawer. */
.knowledge-article-body img, .knowledge-selected-body img { display: block; max-width: 100%; height: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; }
.knowledge-article-body { font-size: 12px; line-height: 1.6; }
.knowledge-article-body h2, .knowledge-article-body h3, .knowledge-article-body h4 { margin: 18px 0 6px; color: var(--ink); font-size: 13px; }
.knowledge-article-body p { margin: 0 0 10px; }
.knowledge-article-body ul, .knowledge-article-body ol { margin: 0 0 10px; padding-left: 20px; }
.knowledge-article-body li { margin: 3px 0; }
.knowledge-article-body code { padding: 1px 4px; border-radius: 3px; background: var(--sage-100); font-size: 11px; }
.knowledge-article-body pre { overflow-x: auto; padding: 10px; border-radius: 6px; background: var(--sage-100); }
.knowledge-article-body table { width: 100%; border-collapse: collapse; margin: 0 0 10px; }
.knowledge-article-body th, .knowledge-article-body td { padding: 6px 8px; border: 1px solid var(--line); text-align: left; }
.knowledge-selected-body { max-height: 460px; }
.knowledge-selected-body p { margin: 0 0 9px; }

/* Finance V2 client revenue workspace */
.finance-v2-shell { display: grid; gap: 16px; }
.finance-v2-shell .support-intro { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.finance-v2-shell .support-intro h2 { margin: 3px 0 5px; color: var(--ink); }
.finance-v2-header { align-items: center !important; }
.finance-v2-nav { display: flex; gap: 6px; margin-top: 13px; }
.finance-v2-nav a { padding: 6px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 13px; }
.finance-v2-nav a.active, .finance-v2-nav a:hover { background: var(--surface); color: var(--ink); }
.finance-v2-year { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.finance-v2-year select { min-height: 34px; padding: 0 28px 0 9px; }
.finance-v2-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.finance-v2-summary > div { display: grid; gap: 5px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.finance-v2-summary strong { color: var(--ink); font-size: 22px; font-weight: 700; }
.finance-v2-revenue { min-width: 1220px; }
.finance-v2-invoices { min-width: 980px; }
.finance-v2-expenses { min-width: 1120px; }
.finance-v2-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.finance-v2-pnl { max-width: 680px; }
.finance-v2-pnl tr.total { border-top: 1px solid var(--line); }
.finance-v2-toggle { display: flex; gap: 6px; }
.finance-v2-toggle .active { border-color: var(--accent); background: var(--accent); color: white; }
.finance-v2-invoices input, .finance-v2-invoices select { min-height: 34px; max-width: 190px; }
.finance-v2-invoices .row-actions { white-space: nowrap; }
.finance-v2-expense-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.finance-v2-expense-actions p { margin: 0; }
.finance-v2-client-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 16px; }
.finance-v2-details { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 9px 14px; margin: 16px 0 0; }
.finance-v2-details dt { color: var(--muted); font-size: 12px; }
.finance-v2-details dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.finance-v2-fee-form { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; align-items: end; gap: 10px; margin-top: 16px; }
.finance-v2-fee-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.finance-v2-fee-form input { min-height: 34px; padding: 0 9px; }
.finance-v2-fee-form [data-finance-v2-fee-error] { align-self: center; }
.finance-v2-link, .finance-v2-back { color: var(--accent); text-decoration: none; font-weight: 600; }
.finance-v2-link:hover, .finance-v2-back:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .finance-v2-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-v2-shell .support-intro { align-items: start; flex-direction: column; }
  .finance-v2-client-grid { grid-template-columns: 1fr; }
  .finance-v2-report-grid { grid-template-columns: 1fr; }
  .finance-v2-fee-form { grid-template-columns: 1fr; }
  .finance-v2-expense-actions { align-items: start; flex-direction: column; }
}

/* Keep the remaining live portal drawers in the same opt-in mobile sheet
   pattern. These selectors correspond to existing Knowledge, Passwords, and
   Settings surfaces; the tenant tab registry still controls whether a user
   can reach them. */
@media (max-width: 720px) {
  body[data-mobile-navigation="bottom"] .knowledge-drawer-overlay,
  body[data-mobile-navigation="bottom"] .knowledge-question-overlay,
  body[data-mobile-navigation="bottom"] .knowledge-create-overlay,
  body[data-mobile-navigation="bottom"] .user-group-drawer-overlay,
  body[data-mobile-navigation="bottom"] .phone-schedule-drawer-overlay {
    align-items: flex-end;
    justify-content: stretch;
  }

  body[data-mobile-navigation="bottom"] .native-vault-modal-overlay {
    place-items: end stretch;
    padding: 0;
  }

  body[data-mobile-navigation="bottom"] .native-vault-drawer-overlay {
    align-items: flex-end;
    justify-content: stretch;
  }

  body[data-mobile-navigation="bottom"] .knowledge-drawer,
  body[data-mobile-navigation="bottom"] .knowledge-question-drawer,
  body[data-mobile-navigation="bottom"] .knowledge-create-drawer,
  body[data-mobile-navigation="bottom"] .knowledge-ai-modal,
  body[data-mobile-navigation="bottom"] .native-vault-modal,
  body[data-mobile-navigation="bottom"] .native-vault-drawer,
  body[data-mobile-navigation="bottom"] .user-group-drawer,
  body[data-mobile-navigation="bottom"] .phone-schedule-drawer {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    width: 100%;
    max-width: none;
    max-height: min(88dvh, 760px);
    height: auto;
    min-height: 0;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 56px rgba(var(--ink-rgb), 0.22);
    animation: mobile-bottom-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  body[data-mobile-navigation="bottom"] .knowledge-drawer::before,
  body[data-mobile-navigation="bottom"] .knowledge-question-drawer::before,
  body[data-mobile-navigation="bottom"] .knowledge-create-drawer::before,
  body[data-mobile-navigation="bottom"] .knowledge-ai-modal::before,
  body[data-mobile-navigation="bottom"] .native-vault-modal::before,
  body[data-mobile-navigation="bottom"] .native-vault-drawer::before,
  body[data-mobile-navigation="bottom"] .user-group-drawer::before,
  body[data-mobile-navigation="bottom"] .phone-schedule-drawer::before {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
    content: "";
    transform: translateX(-50%);
  }

  body[data-mobile-navigation="bottom"] .knowledge-drawer > header,
  body[data-mobile-navigation="bottom"] .knowledge-question-drawer > header,
  body[data-mobile-navigation="bottom"] .knowledge-create-drawer > header,
  body[data-mobile-navigation="bottom"] .knowledge-ai-modal > header,
  body[data-mobile-navigation="bottom"] .native-vault-modal .native-vault-detail-head,
  body[data-mobile-navigation="bottom"] .native-vault-drawer .native-vault-detail-head,
  body[data-mobile-navigation="bottom"] .user-group-drawer > header,
  body[data-mobile-navigation="bottom"] .phone-schedule-drawer > header {
    padding-top: 28px;
  }

  body[data-mobile-navigation="bottom"] .knowledge-drawer,
  body[data-mobile-navigation="bottom"] .knowledge-question-drawer,
  body[data-mobile-navigation="bottom"] .knowledge-create-drawer,
  body[data-mobile-navigation="bottom"] .user-group-drawer,
  body[data-mobile-navigation="bottom"] .phone-schedule-drawer {
    overflow: hidden;
  }

  body[data-mobile-navigation="bottom"] .knowledge-question-drawer form,
  body[data-mobile-navigation="bottom"] .knowledge-create-drawer form,
  body[data-mobile-navigation="bottom"] .phone-schedule-drawer form {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
  }

  body[data-mobile-navigation="bottom"] .native-vault-drawer {
    height: auto;
    padding: 28px 18px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  body[data-mobile-navigation="bottom"] #directoryDetail {
    display: none;
  }
}

/* ------------------------------------------------------------------ GFPT mobile
   These live operational views have dense desktop tables and boards. At phone
   width, preserve every action but recast them as single-column records rather
   than squeezing their text into unreadable slivers. */
@media (max-width: 720px) {
  /* Tasks becomes a vertical list of people on a phone. That keeps each
     person's work in reach with ordinary page scrolling rather than a hidden
     horizontal board. */
  body[data-mobile-navigation="bottom"] .task-board-head {
    justify-content: stretch;
    margin: 0 0 12px;
  }

  body[data-mobile-navigation="bottom"] .task-board-controls {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  body[data-mobile-navigation="bottom"] .mobile-view-actions .task-title-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  body[data-mobile-navigation="bottom"] .mobile-view-actions .task-title-actions > .task-toggle[aria-label="Sort tasks by"] {
    order: 1;
  }

  body[data-mobile-navigation="bottom"] .mobile-view-actions .task-title-actions > [data-new-task] {
    display: inline-flex;
    order: 2;
    margin-left: 0;
    height: var(--control-h);
    min-height: var(--control-h);
  }

  /* This lives after the shared dark-theme primary-button treatment. The
     mobile New Task action is always a green fill, so its entire label must
     stay white rather than inheriting that treatment's dark lettering. */
  body[data-mobile-navigation="bottom"] .mobile-view-actions .task-title-actions .task-new-btn.primary-btn,
  body[data-mobile-navigation="bottom"] .mobile-view-actions .task-title-actions .task-new-btn.primary-btn span,
  body[data-mobile-navigation="bottom"] .mobile-view-actions .task-title-actions .task-new-btn.primary-btn :is(i, svg) {
    color: #fff !important;
  }

  body[data-mobile-navigation="bottom"] .task-toggle {
    max-width: 100%;
  }

  body[data-mobile-navigation="bottom"] .mobile-view-actions .task-title-actions .task-toggle button {
    padding-inline: 11px;
  }

  body[data-mobile-navigation="bottom"] .project-board {
    display: block;
    height: auto;
  }

  body[data-mobile-navigation="bottom"] .project-board-scroll {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    padding: 0 0 12px;
  }

  /* The first lane is pinned for desktop scanning. On a phone that pin covers
     the next lane while the board scrolls, so every lane must move together. */
  body[data-mobile-navigation="bottom"] .project-board-column.is-sticky-column {
    position: relative;
    left: auto;
    z-index: auto;
    box-shadow: none;
  }

  body[data-mobile-navigation="bottom"] .project-board-column {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }

  body[data-mobile-navigation="bottom"] .project-board-column-body {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }

  body[data-mobile-navigation="bottom"] .project-board-column.is-person-column.is-collapsed {
    width: 100%;
  }

  /* Tracking Links: one concise, touch-sized record per link. */
  body[data-mobile-navigation="bottom"] #linksTable,
  body[data-mobile-navigation="bottom"] #linksTable tbody {
    display: block;
    width: 100%;
  }

  body[data-mobile-navigation="bottom"] #linksTable thead {
    display: none;
  }

  body[data-mobile-navigation="bottom"] #linksTable .tracking-folder-row,
  body[data-mobile-navigation="bottom"] #linksTable .tracking-folder-row > td {
    display: block;
    width: 100%;
  }

  body[data-mobile-navigation="bottom"] #linksTable .tracking-link-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    grid-template-areas:
      "drag name actions"
      "drag destination destination";
    gap: 3px 8px;
    margin: 8px 0;
    padding: 11px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
  }

  body[data-mobile-navigation="bottom"] #linksTable .tracking-link-row > td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    border: 0;
  }

  body[data-mobile-navigation="bottom"] #linksTable .tracking-link-row > td:nth-child(1) { grid-area: drag; }
  body[data-mobile-navigation="bottom"] #linksTable .tracking-link-row > td:nth-child(2) {
    grid-area: name;
    overflow-wrap: anywhere;
    font-weight: 750;
  }
  body[data-mobile-navigation="bottom"] #linksTable .tracking-link-row > td:nth-child(3) {
    grid-area: destination;
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body[data-mobile-navigation="bottom"] #linksTable .tracking-link-row > td:nth-child(3)::before {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    content: "Destination";
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  body[data-mobile-navigation="bottom"] #linksTable .tracking-link-row > td:last-child {
    grid-area: actions;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  body[data-mobile-navigation="bottom"] #linksTable .link-action-btn {
    width: 34px;
    height: 34px;
    margin: 0;
  }

  /* Link Tree shares the same information hierarchy: name first, then a
     bounded destination, status, and its one edit action. */
  body[data-mobile-navigation="bottom"] .link-tree-table-scroll {
    width: 100%;
    margin: 0;
  }
  body[data-mobile-navigation="bottom"] .link-tree-table,
  body[data-mobile-navigation="bottom"] .link-tree-table tbody {
    display: block;
    width: 100%;
  }
  body[data-mobile-navigation="bottom"] .link-tree-table thead {
    display: none;
  }
  body[data-mobile-navigation="bottom"] .link-tree-table-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-areas:
      "drag name action"
      ". destination status";
    gap: 5px 8px;
    margin: 8px 0;
    padding: 11px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
  }
  body[data-mobile-navigation="bottom"] .link-tree-table-row > td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    border: 0;
  }
  body[data-mobile-navigation="bottom"] .link-tree-drag-cell { grid-area: drag; }
  body[data-mobile-navigation="bottom"] .link-tree-name-cell { grid-area: name; }
  body[data-mobile-navigation="bottom"] .link-tree-url-cell {
    grid-area: destination;
    min-width: 0;
  }
  body[data-mobile-navigation="bottom"] .link-tree-url-cell span {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body[data-mobile-navigation="bottom"] .link-tree-status-cell {
    grid-area: status;
    align-self: end;
  }
  body[data-mobile-navigation="bottom"] .link-tree-actions-cell {
    grid-area: action;
    align-self: start;
  }
  body[data-mobile-navigation="bottom"] .link-tree-edit-button {
    min-height: 34px;
    padding-inline: 10px;
  }

  /* Phones: forwarding choices, offices, and metrics must never establish a
     wider min-content width than the viewport. */
  body[data-mobile-navigation="bottom"] .phones-shell,
  body[data-mobile-navigation="bottom"] .phones-consolidate,
  body[data-mobile-navigation="bottom"] .phones-office-grid {
    min-width: 0;
    max-width: 100%;
  }
  body[data-mobile-navigation="bottom"] .phones-consolidate-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  body[data-mobile-navigation="bottom"] .phones-consolidate-actions .secondary-btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
  body[data-mobile-navigation="bottom"] .phones-office-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-mobile-navigation="bottom"] .phones-office-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  body[data-mobile-navigation="bottom"] .phones-tiles.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-mobile-navigation="bottom"] .phones-tiles .metric-card {
    min-width: 0;
  }
}

/*
 * A control must leave room for descenders. Several older component rules use
 * compact, fixed-height controls; this shared final guard prevents letters
 * such as g, j, p, q and y from being clipped when those controls inherit
 * text content. Icon-only controls remain intentionally compact.
 */
body button:not(.icon-button),
body a.button,
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
body select,
body textarea {
  line-height: 1.25;
}


/* Baek waiting-room sign flyer selection */
.ipad-flyer-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.ipad-flyer-setting-card {
  display: grid;
  overflow: hidden;
  min-width: 0;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.ipad-flyer-setting-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--paper-soft, #f5f3ee);
}
.ipad-flyer-setting-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  font-weight: 650;
}
.ipad-flyer-setting-copy input { width: 20px; height: 20px; min-width: 20px; margin: 0; accent-color: var(--green-700, #356e55); }
.ipad-flyer-settings .panel-title-row { align-items: center; gap: 16px; }
@media (max-width: 560px) {
  .ipad-flyer-settings .panel-title-row { align-items: flex-start; flex-direction: column; }
}

/* Appointment documentation stays legible in the established workspace drawer
 * at desktop and phone widths without exposing an editable staff copy. */
.staff-documentation-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.staff-documentation-record {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border, rgba(35, 49, 64, 0.18));
  border-radius: var(--radius-md, 10px);
  background: var(--surface, var(--paper, #fff));
}
.staff-documentation-record-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.staff-documentation-body {
  margin: 12px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .staff-documentation-record { padding: 12px; }
  .staff-documentation-record-heading { align-items: flex-start; }
}

/* Reordering and the new edit drawer need reachable touch targets. */
.task-column-header-actions [data-person-move],
[data-task-edit-drawer] .task-detail-close {
  min-width: 44px;
  min-height: 44px;
}