/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

:root, :host {
  --color-white: #fff;
  --spacing: .25rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1 / .75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --leading-normal: 1.5;
  --radius-lg: .5rem;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.\@container {
  container-type: inline-size;
}

.visible {
  visibility: visible;
}

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

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.static {
  position: static;
}

.top-1\/2 {
  top: 50%;
}

.right-3 {
  right: calc(var(--spacing) * 3);
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.container {
  width: 100%;
}

@media (min-width: 40rem) {
  .container {
    max-width: 40rem;
  }
}

@media (min-width: 48rem) {
  .container {
    max-width: 48rem;
  }
}

@media (min-width: 64rem) {
  .container {
    max-width: 64rem;
  }
}

@media (min-width: 80rem) {
  .container {
    max-width: 80rem;
  }
}

@media (min-width: 96rem) {
  .container {
    max-width: 96rem;
  }
}

.m-0 {
  margin: 0;
}

.mx-auto {
  margin-inline: auto;
}

.mt-1 {
  margin-top: var(--spacing);
}

.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}

.mt-3 {
  margin-top: calc(var(--spacing) * 3);
}

.mt-3\.5 {
  margin-top: calc(var(--spacing) * 3.5);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1\.5 {
  margin-bottom: calc(var(--spacing) * 1.5);
}

.mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}

.mb-3 {
  margin-bottom: calc(var(--spacing) * 3);
}

.mb-3\.5 {
  margin-bottom: calc(var(--spacing) * 3.5);
}

.mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}

.mb-5 {
  margin-bottom: calc(var(--spacing) * 5);
}

.ml-auto {
  margin-left: auto;
}

.block {
  display: block;
}

.contents {
  display: contents;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.h-1\.5 {
  height: calc(var(--spacing) * 1.5);
}

.h-8 {
  height: calc(var(--spacing) * 8);
}

.h-full {
  height: 100%;
}

.max-h-\[42vh\] {
  max-height: 42vh;
}

.max-h-\[60vh\] {
  max-height: 60vh;
}

.min-h-0 {
  min-height: 0;
}

.min-h-12 {
  min-height: calc(var(--spacing) * 12);
}

.w-8 {
  width: calc(var(--spacing) * 8);
}

.w-56 {
  width: calc(var(--spacing) * 56);
}

.w-full {
  width: 100%;
}

.max-w-140 {
  max-width: calc(var(--spacing) * 140);
}

.max-w-155 {
  max-width: calc(var(--spacing) * 155);
}

.max-w-235 {
  max-width: calc(var(--spacing) * 235);
}

.min-w-0 {
  min-width: 0;
}

.flex-1 {
  flex: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.transform {
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}

.cursor-pointer {
  cursor: pointer;
}

.list-none {
  list-style-type: none;
}

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

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

.flex-col {
  flex-direction: column;
}

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

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-start {
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}

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

.justify-end {
  justify-content: flex-end;
}

.gap-1 {
  gap: var(--spacing);
}

.gap-1\.5 {
  gap: calc(var(--spacing) * 1.5);
}

.gap-2 {
  gap: calc(var(--spacing) * 2);
}

.gap-3 {
  gap: calc(var(--spacing) * 3);
}

.gap-4 {
  gap: calc(var(--spacing) * 4);
}

.gap-6 {
  gap: calc(var(--spacing) * 6);
}

:where(.space-y-3 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.rounded-\[0\.875rem\] {
  border-radius: .875rem;
}

.rounded-full {
  border-radius: 3.40282e38px;
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}

.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}

.border-dashed {
  --tw-border-style: dashed;
  border-style: dashed;
}

.border-\[\#1F4A3D\] {
  border-color: #1f4a3d;
}

.border-\[\#B9B09C\] {
  border-color: #b9b09c;
}

.border-\[\#E3DDD0\] {
  border-color: #e3ddd0;
}

.bg-white {
  background-color: var(--color-white);
}

.p-0 {
  padding: 0;
}

.p-2\.5 {
  padding: calc(var(--spacing) * 2.5);
}

.p-3 {
  padding: calc(var(--spacing) * 3);
}

.p-4 {
  padding: calc(var(--spacing) * 4);
}

.p-6 {
  padding: calc(var(--spacing) * 6);
}

.p-16 {
  padding: calc(var(--spacing) * 16);
}

.px-3 {
  padding-inline: calc(var(--spacing) * 3);
}

.px-3\.5 {
  padding-inline: calc(var(--spacing) * 3.5);
}

.px-5 {
  padding-inline: calc(var(--spacing) * 5);
}

.px-6 {
  padding-inline: calc(var(--spacing) * 6);
}

.px-7 {
  padding-inline: calc(var(--spacing) * 7);
}

.py-1 {
  padding-block: var(--spacing);
}

.py-3 {
  padding-block: calc(var(--spacing) * 3);
}

.py-4 {
  padding-block: calc(var(--spacing) * 4);
}

.py-4\.5 {
  padding-block: calc(var(--spacing) * 4.5);
}

.py-6 {
  padding-block: calc(var(--spacing) * 6);
}

.pt-2 {
  padding-top: calc(var(--spacing) * 2);
}

.pt-4 {
  padding-top: calc(var(--spacing) * 4);
}

.pt-6 {
  padding-top: calc(var(--spacing) * 6);
}

.pr-12 {
  padding-right: calc(var(--spacing) * 12);
}

.pb-2 {
  padding-bottom: calc(var(--spacing) * 2);
}

.pb-2\.5 {
  padding-bottom: calc(var(--spacing) * 2.5);
}

.pb-12 {
  padding-bottom: calc(var(--spacing) * 12);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}

.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}

.text-\[0\.6875rem\] {
  font-size: .6875rem;
}

.text-\[0\.8125rem\] {
  font-size: .8125rem;
}

.text-\[1\.375rem\] {
  font-size: 1.375rem;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[26px\] {
  font-size: 26px;
}

.leading-\[1\.15\] {
  --tw-leading: 1.15;
  line-height: 1.15;
}

.leading-normal {
  --tw-leading: var(--leading-normal);
  line-height: var(--leading-normal);
}

.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}

.whitespace-nowrap {
  white-space: nowrap;
}

.uppercase {
  text-transform: uppercase;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
}

.ring {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.filter {
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

@media (hover: hover) {
  .hover\:border-\[\#1F4A3D\]:hover {
    border-color: #1f4a3d;
  }

  .hover\:border-\[\#B9B09C\]:hover {
    border-color: #b9b09c;
  }

  .hover\:text-\[\#1F4A3D\]:hover {
    color: #1f4a3d;
  }
}

@media (min-width: 40rem) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .sm\:border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .sm\:pt-0 {
    padding-top: 0;
  }

  .sm\:pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
}

@container (min-width: 30rem) {
  .\@\[30rem\]\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sen-leaf .raise, .sen-leaf .svc-card {
  transition: box-shadow .2s, border-color .2s;
}

.sen-leaf .raise:hover, .sen-leaf .svc-card:hover {
  border-color: #a9c4b8;
  box-shadow: 0 4px 14px #1432291a;
}

.sen-leaf .ant-btn-primary:not(:disabled) {
  background: linear-gradient(#fff3, #fff0 48%), linear-gradient(#2c6350 0%, #1f4a3d 55%, #163a2f 100%) !important;
  border-color: #0000 !important;
  box-shadow: inset 0 1px #ffffff3d, 0 1px 2px #10182824 !important;
}

.sen-leaf .ant-btn-primary:not(:disabled):hover {
  background: linear-gradient(#ffffff42, #fff0 48%), linear-gradient(#33705b 0%, #235444 55%, #184032 100%) !important;
}

.sen-leaf :focus-visible {
  outline-offset: 2px;
  border-radius: 4px;
  outline: 2px solid #be9a4e;
}

.sen-leaf .sen-panel-head {
  background: linear-gradient(0deg, #fcfdfb 0%, #e6ecddd1 40%, #c5d1b4e6 100%), url("/images/abstract-bg-white-1-thin.jpg") center / cover no-repeat;
  border-bottom: 1px solid #16201c57;
  border-radius: 9px 9px 0 0;
  box-shadow: inset 0 1px #ffffffd9;
}

.sen-leaf .sen-panel-head.light {
  background: linear-gradient(0deg, #fdfefc 0%, #e6ecdd73 40%, #c5d1b480 100%), url("/images/abstract-bg-white-1-thin.jpg") center / cover no-repeat;
}

.sen-leaf .sen-rail-card {
  text-align: left;
  color: #16201c;
  cursor: pointer;
  background: #d2dac71f;
  border: 1px solid #16201c26;
  border-radius: .625rem;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s, background .25s;
  display: flex;
  box-shadow: 0 14px 30px -12px #14322980, 0 3px 8px -4px #14322959, inset 0 1px #fffc;
}

.sen-leaf .sen-rail-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px -12px #14322980, 0 8px 18px -6px #0e221a66, inset 0 1px #fff9;
}

.sen-leaf .sen-rail-card.active {
  color: #1f4a3d;
  background: #1f4a3d1a;
  font-weight: 600;
}

.sen-leaf .sen-rail-card.logout {
  color: #b8431f;
  background: none;
}

.sen-leaf .sen-rail-card .sen-rail-icon {
  opacity: .7;
  font-size: 16px;
  display: inline-flex;
}

.sen-leaf .sen-rail-card.active .sen-rail-icon {
  opacity: 1;
}

.sen-leaf .ant-table {
  background: none;
  border: 1px solid #16201c40;
  border-radius: 8px;
  overflow: hidden;
}

.sen-leaf .ant-table-thead > tr > th {
  color: #7a6222 !important;
  background: #be9a4e1f !important;
  border-bottom: 1px solid #be9a4e !important;
}

.sen-leaf .ant-table-tbody > tr > td {
  border-bottom: 1px solid #16201c29 !important;
}

.sen-leaf .ant-table-tbody > tr.ant-table-row:nth-child(odd) > td {
  background: #fff;
}

.sen-leaf .ant-table-tbody > tr.ant-table-row:nth-child(2n) > td {
  background: #fafbf8;
}

.sen-leaf .ant-table-tbody > tr.ant-table-row:hover > td {
  background: #1f4a3d14 !important;
}

.sen-modal-ombre .ant-modal-header {
  background: linear-gradient(0deg, #fcfdfb 0%, #e6ecddd1 40%, #c5d1b4e6 100%), url("/images/abstract-bg-white-1-thin.jpg") center / cover no-repeat;
  border-bottom: 1px solid #16201c57;
  border-radius: 8px 8px 0 0;
  margin: -20px -24px 16px;
  padding: 16px 24px 12px;
  box-shadow: inset 0 1px #ffffffd9;
}

.sen-modal-ombre .ant-modal-header .ant-modal-title {
  color: #16201c;
  font-family: Fraunces, Georgia, serif;
  font-weight: 500;
}

.sen-leaf .ant-input, .sen-leaf .ant-input-affix-wrapper, .sen-leaf .ant-input-number, .sen-leaf .ant-picker, .sen-leaf .ant-select:not(.ant-select-focused) .ant-select-selector, .ant-modal .ant-input, .ant-modal .ant-input-affix-wrapper, .ant-modal .ant-input-number, .ant-modal .ant-picker, .ant-modal .ant-select:not(.ant-select-focused) .ant-select-selector {
  border-color: #16201c38;
}

.sen-leaf .sen-zebra > * {
  border-radius: 8px;
  padding: 8px 10px;
}

.sen-leaf .sen-zebra > :nth-child(odd) {
  background: none;
}

.sen-leaf .sen-zebra > :nth-child(2n) {
  background: #d2dac71f;
}

.sen-leaf .sen-pulse {
  animation: 1.6s ease-out infinite sen-pulse;
  display: inline-block;
}

@keyframes sen-pulse {
  0% {
    box-shadow: 0 0 #2e7d5b73;
  }

  70% {
    box-shadow: 0 0 0 7px #2e7d5b00;
  }

  100% {
    box-shadow: 0 0 #2e7d5b00;
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}
/* LeafFrame (components/LeafFrame.jsx): the Live Data | Demo Data pill on every
   exposed screen. Ships in the FEDERATED sheet, so: `av-`-prefixed classes
   only, no bare element selectors, no :root, literal values rather than the
   harness's tokens (a host page does not carry them). im#1220 / G12. */

.av-leaf-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.av-leaf-body {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

/* No bar: the pill floats over the screen's TOP-RIGHT corner, where it is
   easy to see (founder, 2026-10-06), clear of the scrollbar, above the page's
   own content. */
.av-data-float {
  position: absolute;
  right: 22px;
  top: 10px;
  z-index: 20;
  font-family: 'Manrope', system-ui, sans-serif;
}

.av-data-pill {
  display: inline-flex;
  flex-shrink: 0;
  padding: 2px;
  border: 1px solid #be9a4e;
  border-radius: 999px;
  background: #f4f1ea;
  box-shadow: 0 6px 18px -6px rgba(20, 50, 41, 0.35);
}

.av-data-pill .av-data-btn {
  margin: 0;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: #7a6222;
  cursor: pointer;
}

.av-data-pill .av-data-btn:hover {
  background: rgba(190, 154, 78, 0.18);
}

/* The current mode: solid, never washed out — current, not unavailable. */
.av-data-pill .av-data-btn.is-current {
  background: #d8bc7e;
  color: #3d2f0c;
  cursor: default;
}

.av-data-pill .av-data-btn:focus-visible {
  outline: 2px solid #1f4a3d;
  outline-offset: 1px;
}
/* The leaf design language, first built for the Call Log (CallsPage +
   CallLedgerRow) and shared by the pages redesigned after it (see
   KB-2026-10-06-call-log-design-language). Renamed from calls.css when a
   second page took it up. Scoped under `.sen-leaf` like aesthetic.css, so none
   of it reaches the shell chrome when federated; the `cl-` prefix stays, so it
   never collides with the other leaves' classes.

   The read is a concierge's ledger: ivory cards with a visible ink edge (the
   founder's "edges must not dissolve" rule from aesthetic.css still holds),
   Fraunces for the things a person reads first, Manrope for everything else,
   forest for the receptionist and gold for what needs a human. */

.sen-leaf {
  --cl-ink: #16201c;
  --cl-ink-2: #3c4642;
  --cl-ink-3: #6b746f;
  --cl-ink-4: #8d9590;
  --cl-forest: #1f4a3d;
  --cl-forest-2: #2e7d5b;
  --cl-gold: #be9a4e;
  --cl-ochre: #8e6e2e;
  --cl-edge: rgba(22, 32, 28, 0.16);
  --cl-hair: rgba(22, 32, 28, 0.08);
  --cl-serif: 'Fraunces', Georgia, serif;
}

/* ---- Tones (shared by discs, chip dots, callouts) ----------------------- */

.sen-leaf .cl-tone,
.sen-leaf .cl-disc,
.sen-leaf .cl-callout {
  --tone-fg: #5c6660;
  --tone-bg: rgba(22, 32, 28, 0.06);
  --tone-ring: rgba(22, 32, 28, 0.12);
}
.sen-leaf [data-tone='ok'],
.sen-leaf [data-tone='live'] {
  --tone-fg: #1f4a3d;
  --tone-bg: rgba(46, 125, 91, 0.12);
  --tone-ring: rgba(46, 125, 91, 0.26);
}
.sen-leaf [data-tone='warn'],
.sen-leaf [data-tone='gold'] {
  --tone-fg: #8e6e2e;
  --tone-bg: rgba(190, 154, 78, 0.16);
  --tone-ring: rgba(190, 154, 78, 0.36);
}
.sen-leaf [data-tone='bad'] {
  --tone-fg: #9c3d2e;
  --tone-bg: rgba(201, 123, 90, 0.15);
  --tone-ring: rgba(192, 57, 43, 0.24);
}

/* ---- Page frame + hero --------------------------------------------------- */

.sen-leaf .cl-frame {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 32px 64px;
}

.sen-leaf .cl-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px 40px;
  margin-bottom: 28px;
}

.sen-leaf .cl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cl-ochre);
}
.sen-leaf .cl-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, rgba(190, 154, 78, 0), var(--cl-gold));
}

.sen-leaf .cl-title {
  margin: 10px 0 0;
  font-family: var(--cl-serif);
  font-size: 46px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cl-ink);
}

.sen-leaf .cl-lede {
  margin: 12px 0 0;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cl-ink-3);
}

.sen-leaf .cl-hero-stats {
  display: flex;
  gap: 14px;
  margin-left: auto;
}

.sen-leaf .cl-stat {
  min-width: 150px;
  padding: 14px 20px 16px;
  text-align: left;
  font: inherit;
  border: 1px solid var(--cl-edge);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(251, 248, 241, 0.92));
  box-shadow:
    inset 0 1px 0 #fff,
    0 18px 40px -28px rgba(20, 50, 41, 0.45);
  backdrop-filter: blur(6px);
}
.sen-leaf button.cl-stat {
  cursor: pointer;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
.sen-leaf button.cl-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(46, 125, 91, 0.4);
  box-shadow:
    inset 0 1px 0 #fff,
    0 24px 44px -26px rgba(20, 50, 41, 0.55);
}
.sen-leaf .cl-stat-value {
  display: block;
  font-family: var(--cl-serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--cl-ink);
  font-variant-numeric: tabular-nums;
}
.sen-leaf .cl-stat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cl-ink-3);
}
.sen-leaf .cl-stat.live .cl-stat-value {
  color: var(--cl-forest);
}

.sen-leaf .cl-live-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--cl-forest-2);
}

/* ---- View tabs ------------------------------------------------------------ */

.sen-leaf .cl-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.sen-leaf .cl-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--cl-edge);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 2px rgba(20, 50, 41, 0.06),
    0 10px 26px -20px rgba(20, 50, 41, 0.4);
  backdrop-filter: blur(6px);
}

.sen-leaf .cl-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font:
    600 13.5px/1.2 'Manrope',
    sans-serif;
  color: var(--cl-ink-3);
  cursor: pointer;
  transition:
    color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}
.sen-leaf .cl-tab:hover {
  color: var(--cl-ink);
  background: rgba(31, 74, 61, 0.06);
}
.sen-leaf .cl-tab[aria-selected='true'] {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #2c6350 0%, #1f4a3d 55%, #163a2f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 18px -8px rgba(20, 50, 41, 0.6);
}
.sen-leaf .cl-tab-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(46, 125, 91, 0.14);
  color: var(--cl-forest);
}
.sen-leaf .cl-tab[aria-selected='true'] .cl-tab-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.sen-leaf .cl-tab[aria-selected='true'] .cl-live-dot {
  background: #9fe0bf;
}

/* ---- Cards ---------------------------------------------------------------- */

.sen-leaf .cl-card {
  border: 1px solid var(--cl-edge);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfbf7 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 6px -2px rgba(20, 50, 41, 0.08),
    0 32px 64px -40px rgba(20, 50, 41, 0.42);
}

.sen-leaf .cl-card-title {
  margin: 0;
  font-family: var(--cl-serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--cl-ink);
}

.sen-leaf .cl-muted {
  font-size: 13px;
  color: var(--cl-ink-4);
}

.sen-leaf .cl-subhead {
  margin: 20px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cl-ink-4);
}

/* ---- History filters (in the ledger header) ---------------------------- */

.sen-leaf .cl-chips {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.sen-leaf .cl-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border: 1px solid var(--cl-edge);
  border-radius: 999px;
  background: #fff;
  font:
    600 12.5px/1.3 'Manrope',
    sans-serif;
  color: var(--cl-ink-2);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.sen-leaf .cl-chip:hover {
  border-color: rgba(31, 74, 61, 0.4);
  color: var(--cl-ink);
}
.sen-leaf .cl-chip[aria-pressed='true'] {
  border-color: var(--cl-forest);
  background: rgba(31, 74, 61, 0.09);
  color: var(--cl-forest);
  box-shadow: inset 0 0 0 1px var(--cl-forest);
}
.sen-leaf .cl-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tone-fg);
  opacity: 0.85;
}

.sen-leaf .cl-ledger-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ---- Ledger (history list) ------------------------------------------------ */

.sen-leaf .cl-ledger-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 22px 28px 20px;
  border-bottom: 1px solid var(--cl-hair);
}

.sen-leaf .cl-ledger-body {
  padding: 4px 16px 12px;
}

.sen-leaf .cl-day + .cl-day {
  margin-top: 8px;
}

.sen-leaf .cl-day-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px 12px 8px;
}
.sen-leaf .cl-day-name {
  font-family: var(--cl-serif);
  font-size: 16px;
  font-style: italic;
  color: var(--cl-ink);
}
.sen-leaf .cl-day-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cl-ochre);
}
.sen-leaf .cl-day-rule {
  flex: 1;
  height: 1px;
  align-self: center;
  background: linear-gradient(90deg, rgba(190, 154, 78, 0.45), rgba(190, 154, 78, 0));
}

.sen-leaf .cl-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 16px 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.sen-leaf .cl-row + .cl-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 76px;
  right: 14px;
  height: 1px;
  background: var(--cl-hair);
}
.sen-leaf .cl-row:hover,
.sen-leaf .cl-row:focus-visible {
  background: linear-gradient(90deg, rgba(31, 74, 61, 0.06), rgba(190, 154, 78, 0.05));
  box-shadow: inset 0 0 0 1px rgba(31, 74, 61, 0.1);
}
.sen-leaf .cl-row:hover::before,
.sen-leaf .cl-row:hover + .cl-row::before {
  opacity: 0;
}
/* A row that opens nothing (Analytics' recent calls): no chevron column, and
   no hover, so it never looks clickable. */
.sen-leaf .cl-row.is-static {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  cursor: default;
}
.sen-leaf .cl-row.is-static:hover {
  background: transparent;
  box-shadow: none;
}
.sen-leaf .cl-row.is-static:hover::before,
.sen-leaf .cl-row.is-static:hover + .cl-row::before {
  opacity: 1;
}

.sen-leaf .cl-disc {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
  color: var(--tone-fg);
  background: var(--tone-bg);
  box-shadow: inset 0 0 0 1px var(--tone-ring);
}
.sen-leaf .cl-disc.lg {
  width: 64px;
  height: 64px;
  font-size: 26px;
  box-shadow:
    inset 0 0 0 1px var(--tone-ring),
    0 0 0 6px rgba(255, 255, 255, 0.9),
    0 0 0 7px var(--tone-ring);
}

.sen-leaf .cl-row-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.sen-leaf .cl-row-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.sen-leaf .cl-row-phone {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cl-ink);
  font-variant-numeric: tabular-nums;
}
.sen-leaf .cl-row-headline {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cl-ink-2);
}
.sen-leaf .cl-row-headline.muted {
  font-style: italic;
  color: var(--cl-ink-4);
}
.sen-leaf .cl-row-meta {
  font-size: 12.5px;
  color: var(--cl-ink-4);
}
.sen-leaf .cl-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sen-leaf .cl-row-time {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cl-ink);
}
.sen-leaf .cl-row-dur {
  font-size: 12.5px;
  color: var(--cl-ink-4);
}
.sen-leaf .cl-row-chev {
  font-size: 12px;
  color: var(--cl-ink-4);
  opacity: 0.5;
  transition:
    transform 0.2s,
    opacity 0.2s,
    color 0.2s;
}
.sen-leaf .cl-row:hover .cl-row-chev {
  opacity: 1;
  color: var(--cl-forest);
  transform: translateX(3px);
}

.sen-leaf .cl-ledger-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 28px 20px;
  border-top: 1px solid var(--cl-hair);
}

.sen-leaf .cl-skeletons {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 28px 28px;
}

/* ---- Empty states --------------------------------------------------------- */

.sen-leaf .cl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 24px 72px;
  text-align: center;
}
.sen-leaf .cl-empty-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 24px;
  color: var(--cl-ochre);
  background: radial-gradient(circle at 30% 25%, #fffaf0, #f3e8cf);
  box-shadow:
    inset 0 0 0 1px rgba(190, 154, 78, 0.4),
    0 0 0 8px rgba(190, 154, 78, 0.08);
}
.sen-leaf .cl-empty-title {
  margin-top: 20px;
  font-family: var(--cl-serif);
  font-size: 22px;
  color: var(--cl-ink);
}
.sen-leaf .cl-empty-text {
  margin-top: 6px;
  max-width: 380px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cl-ink-3);
}

/* ---- Live ----------------------------------------------------------------- */

.sen-leaf .cl-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.sen-leaf .cl-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.sen-leaf .cl-live-card {
  position: relative;
  overflow: hidden;
  padding: 22px 24px 24px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(46, 125, 91, 0.1), rgba(46, 125, 91, 0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%);
}
.sen-leaf .cl-live-card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #2e7d5b, #be9a4e);
}

.sen-leaf .cl-live-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sen-leaf .cl-onair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cl-forest);
}

.sen-leaf .cl-wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}
.sen-leaf .cl-wave i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, #2e7d5b, #be9a4e);
  transform-origin: center;
  animation: cl-wave 1.1s ease-in-out infinite;
}
.sen-leaf .cl-wave i:nth-child(2) {
  animation-delay: -0.9s;
}
.sen-leaf .cl-wave i:nth-child(3) {
  animation-delay: -0.6s;
}
.sen-leaf .cl-wave i:nth-child(4) {
  animation-delay: -0.3s;
}
.sen-leaf .cl-wave i:nth-child(5) {
  animation-delay: -0.75s;
}
@keyframes cl-wave {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

.sen-leaf .cl-live-timer {
  margin-top: 18px;
  font-family: var(--cl-serif);
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cl-forest);
}
.sen-leaf .cl-live-timer span {
  font-weight: inherit;
}
.sen-leaf .cl-live-phone {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cl-ink);
  font-variant-numeric: tabular-nums;
}
.sen-leaf .cl-live-meta {
  margin: 4px 0 20px;
  font-size: 13.5px;
  color: var(--cl-ink-3);
}

/* ---- Call detail ---------------------------------------------------------- */

.sen-leaf .cl-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 14px 7px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font:
    600 13.5px/1.2 'Manrope',
    sans-serif;
  color: var(--cl-ink-3);
  cursor: pointer;
  transition:
    color 0.2s,
    background 0.2s,
    border-color 0.2s;
}
.sen-leaf .cl-back:hover {
  color: var(--cl-forest);
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--cl-edge);
}

.sen-leaf .cl-detail-hero {
  overflow: hidden;
}
.sen-leaf .cl-detail-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
  padding: 28px 32px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(216, 188, 126, 0.16), rgba(216, 188, 126, 0) 60%),
    radial-gradient(70% 120% at 0% 0%, rgba(197, 209, 180, 0.32), rgba(197, 209, 180, 0) 65%);
}
.sen-leaf .cl-detail-phone {
  margin-top: 6px;
  font-family: var(--cl-serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--cl-ink);
  font-variant-numeric: tabular-nums;
}
.sen-leaf .cl-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.sen-leaf .cl-gold-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 11px 20px;
  border: 1px solid rgba(190, 154, 78, 0.55);
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf7, #f6ecd5);
  font-size: 14px;
  font-weight: 700;
  color: #6b5320;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 24px -14px rgba(142, 110, 46, 0.6);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.sen-leaf .cl-gold-btn:hover {
  color: #5a451a;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 14px 28px -14px rgba(142, 110, 46, 0.7);
}
.sen-leaf .cl-gold-btn .anticon {
  font-size: 16px;
}

.sen-leaf .cl-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
  border-top: 1px solid var(--cl-hair);
}
.sen-leaf .cl-fact {
  padding: 16px 32px 18px;
  border-right: 1px solid var(--cl-hair);
}
.sen-leaf .cl-fact:last-child {
  border-right: 0;
}
.sen-leaf .cl-fact dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cl-ink-4);
}
.sen-leaf .cl-fact dd {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--cl-ink);
  font-variant-numeric: tabular-nums;
}

.sen-leaf .cl-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}
@media (min-width: 1024px) {
  .sen-leaf .cl-detail-grid {
    grid-template-columns: 380px minmax(0, 1fr);
  }
  .sen-leaf .cl-detail-aside {
    position: sticky;
    top: 24px;
  }
}
.sen-leaf .cl-detail-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sen-leaf .cl-pad {
  padding: 24px 26px 26px;
}

.sen-leaf .cl-gist {
  margin: 14px 0 0;
  font-family: var(--cl-serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--cl-ink);
}

.sen-leaf .cl-bullets,
.sen-leaf .cl-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sen-leaf .cl-bullets li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cl-ink-2);
}
.sen-leaf .cl-bullets li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cl-gold);
  box-shadow: 0 0 0 3px rgba(190, 154, 78, 0.16);
}
.sen-leaf .cl-steps {
  counter-reset: cl-step;
}
.sen-leaf .cl-steps li {
  position: relative;
  padding-left: 34px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cl-ink);
  counter-increment: cl-step;
}
.sen-leaf .cl-steps li::before {
  content: counter(cl-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #2c6350, #1f4a3d);
}

.sen-leaf .cl-callout {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--tone-ring);
  background: var(--tone-bg);
}
.sen-leaf .cl-callout > .anticon {
  margin-top: 2px;
  font-size: 18px;
  color: var(--tone-fg);
}
.sen-leaf .cl-callout-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tone-fg);
}
.sen-leaf .cl-callout-text {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cl-ink-2);
}

.sen-leaf .cl-transcript-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--cl-hair);
}

.sen-leaf .cl-transcript {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
  padding: 26px 28px 32px;
}

.sen-leaf .cl-msg {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  max-width: 80%;
}
.sen-leaf .cl-msg.customer {
  margin-left: auto;
  flex-direction: row-reverse;
}
.sen-leaf .cl-msg-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.sen-leaf .cl-msg.customer .cl-msg-body {
  align-items: flex-end;
}
.sen-leaf .cl-msg-who {
  margin: 0 6px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cl-ink-4);
}
.sen-leaf .cl-msg-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(180deg, #2c6350, #163a2f);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(190, 154, 78, 0.55);
}
.sen-leaf .cl-msg.customer .cl-msg-avatar {
  background: linear-gradient(180deg, #d8bc7e, #b08a3e);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(190, 154, 78, 0.35);
}
.sen-leaf .cl-msg-bubble {
  padding: 12px 16px;
  border: 1px solid rgba(22, 32, 28, 0.1);
  border-radius: 18px 18px 18px 6px;
  background: #fff;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cl-ink);
  box-shadow: 0 10px 22px -18px rgba(20, 50, 41, 0.45);
}
.sen-leaf .cl-msg.customer .cl-msg-bubble {
  border-color: rgba(190, 154, 78, 0.34);
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(180deg, #fdf9ef, #f7efdc);
}

/* ---- Small screens -------------------------------------------------------- */

@media (max-width: 720px) {
  .sen-leaf .cl-frame {
    padding: 24px 16px 48px;
  }
  .sen-leaf .cl-title {
    font-size: 36px;
  }
  .sen-leaf .cl-hero-stats {
    margin-left: 0;
    width: 100%;
  }
  .sen-leaf .cl-stat {
    flex: 1;
    min-width: 0;
  }
  .sen-leaf .cl-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
  }
  .sen-leaf .cl-row .cl-disc {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .sen-leaf .cl-row-chev {
    display: none;
  }
  .sen-leaf .cl-row + .cl-row::before {
    left: 62px;
  }
  .sen-leaf .cl-detail-id,
  .sen-leaf .cl-ledger-head,
  .sen-leaf .cl-transcript-head {
    padding-left: 20px;
    padding-right: 20px;
  }
  .sen-leaf .cl-fact {
    padding: 14px 20px;
  }
  .sen-leaf .cl-msg {
    max-width: 92%;
  }
  .sen-leaf .cl-gold-btn {
    margin-left: 0;
  }
  .sen-leaf .cl-ledger-tools {
    width: 100%;
    margin-left: 0;
  }
  .sen-leaf .cl-ledger-tools .ant-picker {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sen-leaf .cl-wave i {
    animation: none;
    transform: scaleY(0.6);
  }
  .sen-leaf .cl-row-chev,
  .sen-leaf button.cl-stat,
  .sen-leaf .cl-gold-btn {
    transition: none;
  }
}
/* Messages tab (MessagesTab, inside the Calls leaf). Built on leaf.css — the
   ledger rows for the inbox, the transcript bubbles for a conversation — with
   only this tab's own pieces here, prefixed `cm-` and scoped under `.sen-leaf`
   like the rest, so nothing reaches the shell chrome when federated.

   As in the call transcript: the salon ("You") on the left in white with a
   forest avatar, the customer on the right in warm ivory with a gold one. */

/* The inbox preview's speaker, quieter than the words. */
.sen-leaf .cm-who {
  font-weight: 600;
  color: var(--cl-ink-3);
}

/* A conversation scrolls inside its card, so the composer stays in view. */
.sen-leaf .cm-pane {
  max-height: min(560px, 62vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The other side of a translation, under its bubble. */
.sen-leaf .cm-msg-note {
  display: flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  margin: 6px 6px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cl-ink-3);
}
.sen-leaf .cm-msg-note .anticon {
  flex: none;
  color: var(--cl-ochre);
}

.sen-leaf .cm-msg-time {
  margin: 4px 6px 0;
  font-size: 11.5px;
  color: var(--cl-ink-4);
  font-variant-numeric: tabular-nums;
}

.sen-leaf .cm-composer {
  padding: 16px 28px 18px;
  border-top: 1px solid var(--cl-hair);
  background: linear-gradient(180deg, rgba(251, 248, 241, 0), rgba(251, 248, 241, 0.9));
  border-radius: 0 0 18px 18px;
}
.sen-leaf .cm-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.sen-leaf .cm-composer-globe {
  margin-bottom: 9px;
  font-size: 16px;
  color: var(--cl-ink-4);
}
.sen-leaf .cm-composer-hint {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--cl-ink-4);
}
.sen-leaf .cm-composer-hint strong {
  color: var(--cl-ink-2);
}

.sen-leaf .cm-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  border-top: 1px solid var(--cl-hair);
  font-size: 13.5px;
  color: var(--cl-ink-3);
}

.sen-leaf .cm-readonly {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 28px 0;
  padding: 12px 16px;
  border: 1px solid var(--cl-edge);
  border-radius: 12px;
  background: rgba(22, 32, 28, 0.035);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cl-ink-2);
}
.sen-leaf .cm-readonly .anticon {
  margin-top: 3px;
  color: var(--cl-ink-4);
}
.sen-leaf .cm-readonly.in-composer {
  margin: 0 0 12px;
}

@media (max-width: 720px) {
  .sen-leaf .cm-readonly:not(.in-composer) {
    margin-left: 20px;
    margin-right: 20px;
  }
  .sen-leaf .cm-composer,
  .sen-leaf .cm-locked {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* Sen Persona leaf (PersonaPage). Built on leaf.css — the hero, cards, chips
   and callout — with only this page's own pieces here, prefixed `pp-` and
   scoped under `.sen-leaf` like the rest, so nothing reaches the shell chrome
   when federated. */

/* ---- The calling card: who the receptionist is, in its own words ---------- */

/* The same forest-and-gold wash as Call Analytics' line card. */
.sen-leaf .pp-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 20px 40px;
  margin-bottom: 20px;
  padding: 28px 32px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(216, 188, 126, 0.16), rgba(216, 188, 126, 0) 60%),
    radial-gradient(70% 120% at 0% 0%, rgba(197, 209, 180, 0.32), rgba(197, 209, 180, 0) 65%),
    linear-gradient(180deg, #ffffff 0%, #fcfbf7 100%);
}

.sen-leaf .pp-card-main {
  min-width: 0;
}

.sen-leaf .pp-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cl-ochre);
}

.sen-leaf .pp-name {
  margin-top: 6px;
  font-family: var(--cl-serif);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cl-ink);
  overflow-wrap: anywhere;
}
.sen-leaf .pp-name.is-unset {
  font-size: 26px;
  font-style: italic;
  color: var(--cl-ink-4);
}

.sen-leaf .pp-card-sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--cl-ink-3);
}

/* The greeting, set off by a gold rule like a quotation in a letter. */
.sen-leaf .pp-greeting {
  margin: 0;
  padding-left: 28px;
  border-left: 1px solid rgba(190, 154, 78, 0.5);
}
.sen-leaf .pp-greeting-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cl-ink-4);
}
.sen-leaf .pp-greeting blockquote {
  margin: 8px 0 0;
  font-family: var(--cl-serif);
  font-size: 20px;
  font-style: italic;
  line-height: 1.45;
  color: var(--cl-ink-2);
}

/* ---- Read-only note ------------------------------------------------------- */

.sen-leaf .pp-readonly {
  align-items: center;
  margin-bottom: 20px;
}
.sen-leaf .pp-readonly > .anticon {
  margin-top: 0;
}
.sen-leaf .pp-readonly .cl-callout-text {
  margin-top: 0;
}

/* ---- Section jumps -------------------------------------------------------- */

.sen-leaf .pp-nav {
  margin: 0 0 20px;
}
.sen-leaf .pp-chip-count {
  font-weight: 600;
  color: var(--cl-ink-4);
  font-variant-numeric: tabular-nums;
}

/* ---- A group of settings -------------------------------------------------- */

.sen-leaf .pp-group {
  margin-bottom: 20px;
  /* Clear of the Live Data | Demo Data pill when a jump lands the card at the top. */
  scroll-margin-top: 56px;
}

.sen-leaf .pp-group-titles {
  flex: 1;
  min-width: 0;
}
.sen-leaf .pp-group-sub {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cl-ink-3);
}
.sen-leaf .pp-count {
  align-self: flex-start;
  margin-top: 6px;
  white-space: nowrap;
}

/* One setting: what it is on the left, its control on the right, with an
   inset hairline between settings as in the ledger. */
.sen-leaf .pp-fields {
  padding: 4px 28px 8px;
}
.sen-leaf .pp-field {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 10px 32px;
  padding: 20px 0;
}
.sen-leaf .pp-field + .pp-field {
  border-top: 1px solid var(--cl-hair);
}

.sen-leaf .pp-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cl-ink);
}
.sen-leaf .pp-hint {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cl-ink-3);
}
/* The setting's key, for support: present but quiet. */
.sen-leaf .pp-key {
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--cl-ink-4);
  overflow-wrap: anywhere;
}

.sen-leaf .pp-field-control {
  min-width: 0;
}
.sen-leaf .pp-field-control > * + * {
  margin-top: 8px;
}
.sen-leaf .pp-input {
  max-width: 360px;
}
.sen-leaf .pp-select {
  width: 100%;
}

/* On | Off: the side in effect wears the forest gloss ("selected", as the
   leaf's active tab does), so the state reads at a glance. Scoped to this
   page's controls; Quality's Segmented keeps antd's look. */
.sen-leaf .pp-field-control .ant-segmented {
  padding: 3px;
  border-radius: 999px;
  background: rgba(22, 32, 28, 0.06);
  box-shadow: inset 0 0 0 1px var(--cl-hair);
}
.sen-leaf .pp-field-control .ant-segmented-item,
.sen-leaf .pp-field-control .ant-segmented-thumb {
  border-radius: 999px;
}
.sen-leaf .pp-field-control .ant-segmented-item-label {
  min-height: 28px;
  padding: 0 16px;
  font-weight: 600;
  line-height: 28px;
}
.sen-leaf .pp-field-control .ant-segmented-item-selected,
.sen-leaf .pp-field-control .ant-segmented-thumb {
  background: linear-gradient(180deg, #2c6350, #1f4a3d);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(31, 74, 61, 0.7);
}

.sen-leaf .pp-secret {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sen-leaf .pp-secret .pp-key {
  margin-top: 0;
}

/* ---- Save bar ----------------------------------------------------------------
   At rest it sits after the last group. Once something is edited it sticks to
   the foot of the view, so Save is in reach wherever the change was made. */

.sen-leaf .pp-savebar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding: 14px 16px 14px 22px;
  border: 1px solid var(--cl-edge);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 1px 0 #fff,
    0 24px 48px -28px rgba(20, 50, 41, 0.5);
  backdrop-filter: blur(8px);
}
.sen-leaf .pp-savebar.is-dirty {
  position: sticky;
  bottom: 16px;
  border-color: rgba(190, 154, 78, 0.55);
  background: rgba(255, 250, 240, 0.96);
}

.sen-leaf .pp-savebar-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cl-forest-2);
  opacity: 0.55;
}
.sen-leaf .pp-savebar.is-dirty .pp-savebar-dot {
  background: var(--cl-gold);
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(190, 154, 78, 0.18);
}

.sen-leaf .pp-savebar-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cl-ink-3);
}
.sen-leaf .pp-savebar-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--cl-ink);
}

/* ---- Narrow ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .sen-leaf .pp-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .sen-leaf .pp-greeting {
    padding: 18px 0 0;
    border-top: 1px solid rgba(190, 154, 78, 0.4);
    border-left: 0;
  }
}

@media (max-width: 720px) {
  .sen-leaf .pp-card {
    padding: 22px 20px;
  }
  .sen-leaf .pp-name {
    font-size: 32px;
  }
  .sen-leaf .pp-greeting blockquote {
    font-size: 18px;
  }
  .sen-leaf .pp-fields {
    padding: 0 20px 4px;
  }
  .sen-leaf .pp-field {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 0;
  }
  .sen-leaf .pp-savebar {
    flex-wrap: wrap;
  }
  .sen-leaf .pp-savebar.is-dirty {
    bottom: 10px;
  }
  /* Stuck to a phone's foot, the bar keeps to its headline and button. */
  .sen-leaf .pp-savebar.is-dirty .pp-savebar-text span {
    display: none;
  }
  .sen-leaf .pp-savebar .ant-btn {
    width: 100%;
  }
}
/* Call Analytics leaf (AnalyticsPage). Built on leaf.css — the hero stats,
   cards and ledger rows — with only this page's own pieces here, prefixed
   `an-` and scoped under `.sen-leaf` like the rest, so nothing reaches the
   shell chrome when federated. */

/* The line card: is the receptionist answering? Forest-and-gold wash when it
   is, a warm amber one when it needs attention. */
.sen-leaf .an-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 20px;
  padding: 28px 32px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(216, 188, 126, 0.16), rgba(216, 188, 126, 0) 60%),
    radial-gradient(70% 120% at 0% 0%, rgba(197, 209, 180, 0.32), rgba(197, 209, 180, 0) 65%),
    linear-gradient(180deg, #ffffff 0%, #fcfbf7 100%);
}
.sen-leaf .an-line.is-down {
  border-color: rgba(190, 154, 78, 0.5);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(216, 188, 126, 0.3), rgba(216, 188, 126, 0) 60%),
    linear-gradient(180deg, #fffaf0 0%, #fbf3e2 100%);
}

.sen-leaf .an-line-main {
  min-width: 0;
}

.sen-leaf .an-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cl-ochre);
}

.sen-leaf .an-line-number {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-family: var(--cl-serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--cl-ink);
  font-variant-numeric: tabular-nums;
}
.sen-leaf .an-line-number .anticon {
  font-size: 24px;
  color: var(--cl-forest);
}
.sen-leaf .an-line.is-down .an-line-number .anticon {
  color: var(--cl-ochre);
}

.sen-leaf .an-line-sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--cl-ink-3);
}

@media (max-width: 720px) {
  .sen-leaf .an-line {
    padding: 22px 20px;
  }
  .sen-leaf .an-line-number {
    font-size: 28px;
  }
}
/* stylelint-disable */
html,
body {
  width: 100%;
  height: 100%;
}
input::-ms-clear,
input::-ms-reveal {
  display: none;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@-ms-viewport {
  width: device-width;
}
body {
  margin: 0;
}
[tabindex='-1']:focus {
  outline: none;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-weight: 500;
}
p {
  margin-top: 0;
  margin-bottom: 1em;
}
abbr[title],
abbr[data-original-title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  border-bottom: 0;
  cursor: help;
}
address {
  margin-bottom: 1em;
  font-style: normal;
  line-height: inherit;
}
input[type='text'],
input[type='password'],
input[type='number'],
textarea {
  -webkit-appearance: none;
}
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1em;
}
ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}
dt {
  font-weight: 500;
}
dd {
  margin-bottom: 0.5em;
  margin-left: 0;
}
blockquote {
  margin: 0 0 1em;
}
dfn {
  font-style: italic;
}
b,
strong {
  font-weight: bolder;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
pre,
code,
kbd,
samp {
  font-size: 1em;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
pre {
  margin-top: 0;
  margin-bottom: 1em;
  overflow: auto;
}
figure {
  margin: 0 0 1em;
}
img {
  vertical-align: middle;
  border-style: none;
}
a,
area,
button,
[role='button'],
input:not([type='range']),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}
table {
  border-collapse: collapse;
}
caption {
  padding-top: 0.75em;
  padding-bottom: 0.3em;
  text-align: left;
  caption-side: bottom;
}
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html [type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
input[type='radio'],
input[type='checkbox'] {
  box-sizing: border-box;
  padding: 0;
}
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  -webkit-appearance: listbox;
}
textarea {
  overflow: auto;
  resize: vertical;
}
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
legend {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.5em;
  padding: 0;
  color: inherit;
  font-size: 1.5em;
  line-height: inherit;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}
[type='search'] {
  outline-offset: -2px;
  -webkit-appearance: none;
}
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}
output {
  display: inline-block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none !important;
}
mark {
  padding: 0.2em;
  background-color: #feffe6;
}
* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  height: 100%;
}

body {
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #F7F2E9;
}
/* ============================================================================
   Console chrome — ported from pos-ui (src/styles.css), value for value.

   The SenSalon console frame for the STANDALONE HARNESS: brand header/footer
   banner, the tier-2 left rail treatment, and the Business/Location landing.
   The exposed leaves (./Calls ./Persona ./Prompts ./Analytics) never import
   this file — when federated the shell owns the chrome.

   ★ Deliberately NO global `button { }` / `input { }` rules, unlike pos-ui:
   the leaves here are AntD, and a bare-element rule would restyle every
   .ant-btn in them. Each chrome control below carries its own full recipe.
   ========================================================================= */

/* The shared brand set, copied from the brand source (via pos-ui). Imported
   rather than restated so this repo is not a fifth place the palette is
   written down by hand. */
/* ============================================================================
   SenSalon brand tokens — the shared set
   ============================================================================

   ★ COPIED FROM THE BRAND SOURCE, NOT AUTHORED HERE. These values are the `web`
   repo's `:root` block (src/app/globals.css), which is the brand source of record.
   A change to any value below belongs in `web` first and then travels here; a
   colour invented in a console is a colour the marketing site will contradict.

   ★ WHY THIS FILE EXISTS AS A FILE. The same palette has now been hand-carried
   between repos three times, and each carry dropped something: the scheduler
   console had to resolve --sage, --ivory, --forest-deep and --line to literals
   because it did not carry the tokens, and this repo held three of them under
   different local names (--card-bg, --card-border, --card-shadow) while missing
   --ivory and --line entirely. Nobody finds that out from one screen; you find
   it out with two consoles open side by side.

   ★ HOW TO SHARE IT TODAY. This file is plain CSS with no build coupling and no
   dependencies, so another console adopts it by copying it and importing it. That
   is deliberately the whole mechanism: where a shared UI package should live, and
   who reviews a change that alters every console at once, is an open ruling. This
   file commits nobody to the answer, and is reversible in one commit.

   Companion proposal: design-artifact
   platform/SenSalon-LLC-Shared-Business-Location-Panel-Proposal-v0.1.md
   ========================================================================= */

:root {
  /* ---- Neutrals ---- */
  --ivory: #f7f2e9;
  --ivory-2: #fbf8f1;
  --ink: #16201c;

  /* ---- Forest ---- */
  --forest: #1f4a3d;
  --forest-deep: #143229;

  /* ---- Sage ---- */
  --sage: #e3e8db;
  --sage-2: #d2dac7;

  /* ---- Accents ---- */
  --gold: #be9a4e;
  --gold-soft: #d8bc7e;
  --clay: #c97b5a;

  /* ---- Line and shadow ---- */
  --line: rgba(22, 32, 28, 0.12);
  --shadow: 0 24px 60px -28px rgba(20, 50, 41, 0.4);
}

:root {
  color-scheme: light;

  /* ---- App-local tokens (pos-ui's, same names) ---- */
  --forest-tint: rgba(31, 74, 61, 0.1);
  --ink-faded: #5c6660;
  --page-bg: #ffffff;

  /* ---- Aliases onto the brand set ---- */
  --card-bg: var(--ivory-2);
  --card-border: var(--line);
  --card-shadow: var(--shadow);
  --nav-border: var(--line);
  --danger: #b3261e;
  --serif: 'Fraunces', Georgia, serif;
  --radius-panel: 16px;
  --radius-dense: 12px;
}

body {
  background: var(--page-bg);
  color: var(--ink);
}

.app {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* The leaves paint their own page surface edge to edge, so main carries no
   padding or reading-width cap here (pos-ui's 64rem cap is for document-like
   screens this console does not have). */
.app main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 100;
  background: var(--forest-deep);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 0.4rem;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.75rem;
}

.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;
}

/* ---- App banner + footer (mirrors web/copilot-ui brand chrome) ---- */

.app-header {
  position: relative;
  background: #0a1124;
  border-bottom: 1px solid rgba(216, 188, 126, 0.22);
  padding: 14px 28px;
  flex-shrink: 0;
  overflow: hidden;
}

.header-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.header-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 8, 18, 0.55), rgba(9, 16, 32, 0.35) 50%, rgba(8, 13, 26, 0.45));
}

.app-header-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
}

.app-logo {
  height: 40px;
  width: auto;
  display: block;
}

.app-header-tag {
  font-family: 'Manrope', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.app-footer {
  position: relative;
  background: #0a1124;
  color: #fff;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-shrink: 0;
  overflow: hidden;
}

.footer-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.footer-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 13, 26, 0.8), rgba(13, 24, 46, 0.62) 50%, rgba(12, 20, 40, 0.74));
}

.app-footer-logo {
  position: relative;
  z-index: 2;
  height: 24px;
  width: auto;
  display: block;
  margin-top: 6px;
}

.app-footer-copy {
  position: relative;
  z-index: 2;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.02em;
}

/* ---- Left navigator (console tier-2 pattern) ---- */

.left-nav {
  width: 212px;
  flex-shrink: 0;
  /* White wave-lines art (ported from web-studio's theme.css, itself from
     ../web/src/app/globals.css's .feature-hero treatment). */
  background: url('/images/abstract-bg-white-1-thin.jpg') center 5% / cover no-repeat;
  border-right: 1px solid var(--nav-border);
  /* pos-ui's right-edge shade. Lifted above the page (position + z-index)
     because the pages here paint an opaque backdrop — as a plain flex
     sibling the shadow rendered UNDER it and vanished. */
  box-shadow: 2px 0 12px -3px rgba(20, 50, 41, 0.35);
  position: relative;
  z-index: 1;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
}

.left-nav.collapsed {
  width: 64px;
  padding: 20px 8px;
}

.left-nav.collapsed .nav-item {
  justify-content: center;
  padding: 9px 0;
}

/* The lotus brand mark at the rail's crown, tucked up into the rail's own
   top padding (founder-tuned). */
.nav-lotus {
  display: block;
  width: 76px;
  height: auto;
  margin: -8px auto 10px;
}

.left-nav.collapsed .nav-lotus {
  width: 40px;
  margin-bottom: 6px;
}

.nav-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  /* Tightened to 4px (founder-tuned) — the kicker carries its own margin, so
     this reads level with the title's 8px gap to its divider above. */
  margin-bottom: 4px;
}

/* Full width so the centered title actually centers on the rail. */
.nav-header-text {
  flex: 1;
  min-width: 0;
}

.left-nav.collapsed .nav-header {
  justify-content: center;
}

/* Collapsed: the 64px rail leaves no clear top-right corner beside the lotus,
   so the toggle drops beneath it, centered, with real air above and below
   (founder ask 2026-08-13) — the empty header block reserves the room so the
   first nav icon never crowds it. */
.left-nav.collapsed .nav-collapse-toggle {
  top: 58px;
  right: 20px;
}

.left-nav.collapsed .nav-header {
  margin-top: 36px;
  margin-bottom: 22px;
}

/* pos-ui's round collapse toggle — gold ring, chevron flips with state.
   Lifted to the rail's very top-right corner (founder ask 2026-08-13),
   out of the header row's flow. */
.nav-collapse-toggle {
  position: absolute;
  /* Vertically centered on the lotus, which now tucks 8px up into the rail's
     top padding. */
  top: 22px;
  right: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--card-bg);
  color: var(--ink-faded);
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.nav-collapse-toggle:hover {
  color: var(--forest);
  border-color: var(--forest);
  transform: none;
}

.left-nav:not(.collapsed) .nav-collapse-toggle svg {
  transform: rotate(180deg);
}

/* The console mark HEADS the destinations it names. Gold, as it reads
   elsewhere in the chrome. One rule above and below, closing the header off
   from the list. */
.nav-kicker {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0.2rem 0 0.8rem;
  padding: 0.55rem 0;
  text-align: center;
  color: var(--gold);
  border-top: 1px solid rgba(22, 32, 28, 0.18);
  border-bottom: 1px solid rgba(22, 32, 28, 0.18);
}

.nav-title {
  font-family: var(--serif);
  /* 20px, down from 22 — the collapse toggle now shares the header row, and
     at 22 the title broke onto a second line in the slot that remains. */
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  /* Divider above the title (founder ask 2026-08-13), closing the location
     block off from the product name — same rule weight as the kicker's. */
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(22, 32, 28, 0.18);
  white-space: nowrap;
  text-align: center;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

.nav-item .nav-icon {
  display: inline-flex;
  opacity: 0.7;
}

/* Default (non-active) rows share the estate's ghost gradient look. */
.nav-item:not(.active) {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 48%) padding-box,
    linear-gradient(180deg, #f7faf2 0%, #dce3d0 46%, #b9c6a8 100%) padding-box,
    linear-gradient(180deg, rgba(148, 179, 194, 0.5) 0%, rgba(148, 179, 194, 0.85) 40%, rgba(84, 116, 132, 0.9) 100%)
      border-box;
  color: var(--forest-deep);
  box-shadow:
    0 10px 20px -14px rgba(20, 50, 41, 0.5),
    0 2px 6px -3px rgba(20, 50, 41, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.nav-item:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 28px -14px rgba(20, 50, 41, 0.5),
    0 6px 14px -6px rgba(14, 34, 26, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nav-item:not(.active):hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 55%) padding-box,
    linear-gradient(180deg, #d2dac7 0%, #bcc9ae 50%, #a6b794 100%) padding-box,
    linear-gradient(180deg, #94b3c2 0%, #5f8296 100%) border-box;
}

.nav-item.active {
  color: var(--forest);
  background: var(--forest-tint);
  font-weight: 600;
}

.nav-item.active .nav-icon {
  opacity: 1;
}

/* ---- The salon this console is working for, at the top of the nav rail ---- */

.nav-location {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 0.35rem;
  line-height: 1.3;
  color: var(--forest-deep, #14483a);
}

.nav-location-business {
  font-size: 0.82rem;
  font-weight: 700;
}

.nav-location-site {
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(22, 32, 28, 0.7);
}

/* ---- Switch Location, beneath the last destination ---- */

.nav-switch-location {
  padding: 0 0 0.6rem;
}

.nav-switch-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--forest-deep);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 48%) padding-box,
    linear-gradient(180deg, #f7faf2 0%, #dce3d0 46%, #b9c6a8 100%) padding-box,
    linear-gradient(180deg, rgba(148, 179, 194, 0.5) 0%, rgba(148, 179, 194, 0.85) 40%, rgba(84, 116, 132, 0.9) 100%)
      border-box;
  box-shadow:
    0 10px 20px -14px rgba(20, 50, 41, 0.5),
    0 2px 6px -3px rgba(20, 50, 41, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

.nav-switch-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 55%) padding-box,
    linear-gradient(180deg, #d2dac7 0%, #bcc9ae 50%, #a6b794 100%) padding-box,
    linear-gradient(180deg, #94b3c2 0%, #5f8296 100%) border-box;
  box-shadow:
    0 16px 28px -14px rgba(20, 50, 41, 0.5),
    0 6px 14px -6px rgba(14, 34, 26, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nav-switch-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.nav-switch-note {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(22, 32, 28, 0.72);
}

/* ---- Small screens: hide the rail, show a compact top bar + drawer ---- */

.mobile-topbar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--nav-border);
}

.mobile-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.menu-button {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.55rem;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--ink);
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 32, 28, 0.4);
  z-index: 20;
}

.drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 240px;
  background: var(--card-bg);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 12px rgba(16, 24, 40, 0.12);
  overflow-y: auto;
}

@media (max-width: 767px) {
  .left-nav {
    display: none;
  }

  .app-body {
    flex-direction: column;
  }

  .mobile-topbar {
    display: flex;
  }
}

/* ============================================================================
   The Business/Location landing (pos-ui's Home, value for value)
   ========================================================================= */

.home-screen {
  /* Full-bleed backdrop, as the scheduler landing has. */
  min-height: 100%;
  padding: 1.5rem;
  background: url('/images/abstract-bg-white-1-thin.jpg') center / cover no-repeat;
}

.home-screen-inner {
  max-width: 27rem;
  margin: 0 auto;
  padding: 4.5rem 0 3rem;
}

.home-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
}

/* The current location, left of the toolbar's controls. */
.home-toolbar-location {
  margin-right: auto;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.home-toolbar-location strong {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
}

.home-toolbar-location span {
  font-size: 0.85rem;
  color: rgba(22, 32, 28, 0.7);
}

.home-title {
  margin: 0 -3.5rem 1.5rem;
  text-align: center;
}

.home-title h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.125rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

.home-title p {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-faded);
}

/* A link named a salon this login cannot open here: said once, above the picker. */
.home-notice {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-dense);
  background: var(--card-bg);
  color: var(--ink);
  font-size: 0.9rem;
}

.home-panel {
  min-height: 350px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 42%) padding-box,
    /* Flat, but written as a gradient on purpose: in a multi-layer `background`,
       only the LAST layer may be a bare colour. */
    linear-gradient(180deg, #fbf8f1, #fbf8f1) padding-box,
    linear-gradient(180deg, rgba(22, 32, 28, 0.34) 0%, rgba(22, 32, 28, 0.18) 55%, rgba(22, 32, 28, 0.42) 100%)
      border-box;
  box-shadow: 0 24px 60px -28px rgba(20, 50, 41, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
}

.home-panel-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: -24px -24px 32px;
  padding: 24px 24px 18px;
  border-radius: 11px 11px 0 0;
  border-bottom: 1px solid rgba(22, 32, 28, 0.34);
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 48%),
    linear-gradient(0deg, rgba(247, 250, 242, 0.9) 0%, rgba(220, 227, 208, 0.85) 46%, rgba(185, 198, 168, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.home-panel-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 7px;
  font-weight: 700;
  font-size: 1.1rem;
  color: #d8bc7e;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 46%),
    linear-gradient(155deg, #2f6857 0%, #1f4a3d 52%, #143229 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 5px 12px -5px rgba(20, 50, 41, 0.55);
}

.home-panel-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
}

.home-back {
  margin-left: auto;
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(22, 32, 28, 0.28);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.7);
  color: #1f4a3d;
}

.home-back:hover {
  background: #fff;
}

.home-search input {
  width: 100%;
  min-height: 2.6rem;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.8rem;
  font: inherit;
  border: 1px solid rgba(22, 32, 28, 0.28);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.home-businesses,
.home-locations {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-state {
  margin: 0;
  padding: 0.5rem 0.2rem;
  color: var(--ink-faded);
  font-size: 0.9rem;
}

/* A failed load: the reason, then the retry beneath it. */
.home-state-text {
  margin: 0 0 0.6rem;
}

/* ---- The selectable row: company in the chooser, shop in the switcher ---- */

.home-business,
.home-location {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 10px 0 16px;
  padding: 7px 14px;
  text-align: left;
  font: inherit;
  font-weight: 600;
  font-size: 0.93rem;
  cursor: pointer;
  border-radius: 14px;
  border: 1px solid #94b3c2;
  color: #143229;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 18%, rgba(255, 255, 255, 0.3) 62%),
    var(--sage, #e3e8db);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 10px 20px -10px rgba(20, 50, 41, 0.35),
    0 2px 6px -3px rgba(10, 27, 20, 0.3);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
}

.home-business:not(.current):hover,
.home-location:not(.current):not(:disabled):hover {
  transform: translateY(-2px);
  border-color: rgba(22, 32, 28, 0.12);
  color: var(--ink, #16201c);
  background: linear-gradient(180deg, #ffffff 0%, #f7f2e9 100%);
  box-shadow: 0 16px 28px -13px rgba(20, 50, 41, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.home-business:not(.current):hover .home-business-mark,
.home-location:not(.current):not(:disabled):hover .home-business-mark {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
    var(--sage, #e3e8db);
}

.home-business-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #143229;
  background: linear-gradient(180deg, #ffffff, #eef2e8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.home-business-name,
.home-location-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.home-business-name span,
.home-location-addr {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(22, 32, 28, 0.66);
}

.home-location-ord {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(22, 32, 28, 0.5);
  white-space: nowrap;
}

.home-business.current,
.home-location.current {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 55%) padding-box,
    linear-gradient(180deg, #d2dac7 0%, #bcc9ae 50%, #a6b794 100%) padding-box,
    linear-gradient(180deg, #94b3c2 0%, #5f8296 100%) border-box;
  color: #143229;
  box-shadow:
    0 12px 26px -12px rgba(20, 50, 41, 0.45),
    0 3px 8px -4px rgba(20, 50, 41, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.home-business.current:hover,
.home-location.current:not(:disabled):hover {
  transform: translateY(-2px);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 48%) padding-box,
    linear-gradient(180deg, #f7faf2 0%, #dce3d0 46%, #b9c6a8 100%) padding-box,
    linear-gradient(180deg, rgba(148, 179, 194, 0.5) 0%, rgba(148, 179, 194, 0.85) 40%, rgba(84, 116, 132, 0.9) 100%)
      border-box;
  box-shadow: 0 16px 30px -14px rgba(20, 50, 41, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.home-location {
  position: relative;
  align-items: flex-start;
}

.home-location-meta {
  position: absolute;
  top: 8px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  text-align: right;
}

.home-location-name > strong {
  padding-right: 6.5rem;
}

.home-location .home-location-badge {
  margin-left: 0;
}

.home-location-badge {
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--card-bg, #fbf8f1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #2c6252, var(--forest-deep, #143229));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.home-location.is-unsubscribed {
  cursor: not-allowed;
  border-style: dashed;
  border-color: rgba(22, 32, 28, 0.22);
  background: rgba(240, 242, 238, 0.8);
  box-shadow: none;
  color: rgba(22, 32, 28, 0.66);
}

.home-location-why {
  margin: -0.6rem 0 1rem;
  padding: 0 0.4rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(22, 32, 28, 0.7);
}

/* ---- A shop's module set ---- */

.home-shop + .home-shop {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(22, 32, 28, 0.1);
}

.home-modules-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 3.2rem);
  margin: -0.7rem 1.6rem 0.9rem;
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(22, 32, 28, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.55);
  color: #a9803b;
}

.home-modules-toggle:hover {
  border-color: rgba(169, 128, 59, 0.5);
  background: #fff;
  color: #8f6a2c;
}

.home-chev {
  transition: transform 0.2s ease;
}

.home-chev.is-open {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .home-chev {
    transition: none;
  }
}

.home-modules {
  list-style: none;
  margin: -0.5rem 0 1.25rem;
  padding: 0 1.6rem 0 1.6rem;
}

.home-module {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
  padding: 4px 10px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--forest-deep, #143229);
  border: 1px solid rgba(148, 179, 194, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45) 70%),
    var(--sage, #e3e8db);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 10px -6px rgba(20, 50, 41, 0.3);
}

.home-module:last-child {
  margin-bottom: 0;
}

.home-module-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 0.9rem;
  background: linear-gradient(180deg, #ffffff, #eef2e8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* AI Receptionist is the module this console IS, so it carries the site's
   "live" treatment — the one row an operator here is actually scanning for. */
.home-module.is-live {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 55%) padding-box,
    linear-gradient(180deg, #d2dac7 0%, #bcc9ae 50%, #a6b794 100%) padding-box,
    linear-gradient(180deg, #94b3c2 0%, #5f8296 100%) border-box;
  box-shadow: 0 8px 18px -10px rgba(20, 50, 41, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.home-module-on {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 100px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--card-bg, #fbf8f1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #2c6252, var(--forest-deep, #143229));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}