/**
 * Shared desktop primitives + canonical workspace hierarchy.
 * Pilot: Appointments; other modules inherit same classes over time.
 */

/* ─── Global typography base ──────────────────────────────────────────────
 *
 * Sets the Apple system font, font features, smoothing, and default body
 * size + tracking + color across the ENTIRE shell. Every page that loads
 * design-system.css inherits this — surfaces no longer need to redeclare
 * `font-family: var(--ds-font-sans)` on every component (though many
 * legacy surfaces still do; that's harmless because they pull from the
 * same token).
 *
 * The choice of `text-rendering: optimizeLegibility` and the SF Pro
 * `cv11` / `ss01` feature flags makes the rendered text match macOS
 * Sequoia / iOS chrome on Apple devices and read cleanly on Win / Linux.
 *
 * Tabular numerics are NOT enabled globally — they look stiff in prose.
 * Surfaces that need digit-aligned figures (clocks, totals, table
 * cells, timecodes in the calendar) opt in via the `.ds-text-tabular`
 * utility or `font-variant-numeric: tabular-nums` directly. */
html {
  font-family: var(--ds-font-sans);
  font-size: 16px; /* root base: rem unit anchor; do not change */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: var(--ds-font-feature-text);
}

body {
  font-family: inherit;
  font-size: var(--ds-text-base);          /* 14px body */
  font-weight: var(--ds-font-regular);     /* 400 */
  line-height: var(--ds-leading-base);     /* 1.43 */
  letter-spacing: var(--ds-tracking-base); /* -0.011em */
  color: var(--ds-color-text);
  background: var(--ds-color-bg-page);
  /* Reset margins is the layout layer's job, not typography's. */
}

/* Inputs / buttons — UA stylesheets reset font in form controls. Re-establish
 * the body inheritance so controls look like everything else. */
button,
input,
select,
optgroup,
textarea {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
}

/* ─── Typography utility classes — semantic roles ────────────────────────
 *
 * Use these on any element where you want a specific role applied
 * consistently. Each utility ships size + weight + tracking + leading
 * together — never pick one in isolation. Color is intentionally NOT
 * set by these utilities (color is a semantic decision per surface,
 * driven by --ds-color-text-* tokens). */
.ds-text-eyebrow {
  font-size: var(--ds-text-2xs);
  font-weight: var(--ds-font-semibold);
  letter-spacing: var(--ds-tracking-eyebrow);
  line-height: var(--ds-leading-2xs);
  text-transform: uppercase;
}

.ds-text-caption {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-regular);
  letter-spacing: var(--ds-tracking-xs);
  line-height: var(--ds-leading-xs);
}

.ds-text-footnote {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-regular);
  letter-spacing: var(--ds-tracking-sm);
  line-height: var(--ds-leading-sm);
}

.ds-text-body {
  font-size: var(--ds-text-base);
  font-weight: var(--ds-font-regular);
  letter-spacing: var(--ds-tracking-base);
  line-height: var(--ds-leading-base);
}

.ds-text-callout {
  font-size: var(--ds-text-md);
  font-weight: var(--ds-font-regular);
  letter-spacing: var(--ds-tracking-md);
  line-height: var(--ds-leading-md);
}

.ds-text-headline {
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-font-semibold);
  letter-spacing: var(--ds-tracking-lg);
  line-height: var(--ds-leading-lg);
}

.ds-text-title-3 {
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-font-semibold);
  letter-spacing: var(--ds-tracking-xl);
  line-height: var(--ds-leading-xl);
}

.ds-text-title-2 {
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-font-semibold);
  letter-spacing: var(--ds-tracking-2xl);
  line-height: var(--ds-leading-2xl);
}

.ds-text-title-1 {
  font-size: var(--ds-text-display);
  font-weight: var(--ds-font-bold);
  letter-spacing: var(--ds-tracking-display);
  line-height: var(--ds-leading-display);
}

.ds-text-display {
  font-size: var(--ds-text-hero);
  font-weight: var(--ds-font-bold);
  letter-spacing: var(--ds-tracking-hero);
  line-height: var(--ds-leading-hero);
}

/* Color modifiers — pair with any role above. */
.ds-text-secondary { color: var(--ds-color-text-secondary); }
.ds-text-tertiary  { color: var(--ds-color-text-tertiary); }
.ds-text-quaternary { color: var(--ds-color-text-quaternary); }

/* Numerics — opt-in monospaced figures for tables, totals, clocks. */
.ds-text-tabular {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--ds-font-feature-tnum);
  letter-spacing: var(--ds-tracking-tabular);
}

/* Mono — for code, IDs, technical strings. */
.ds-text-mono {
  font-family: var(--ds-font-mono);
  font-feature-settings: "liga" 0;
}

/* ─── Composite type-scale utilities (.ds-type-*) ─────────────────────────
 *
 * Apple-grade canonical type scale. Each utility applies a single
 * `font:` shorthand (weight + size + line-height + family) and the
 * matching letter-spacing. Prefer these over .ds-text-* for new work —
 * they're the contract enforced by `design-tokens.css`.
 *
 * Color is intentionally NOT applied here. Pair with .ds-text-secondary
 * / -tertiary / -quaternary or set color: var(--ds-color-text*) directly. */

.ds-type-display-lg { font: var(--ds-type-display-lg); letter-spacing: var(--ds-tracking-tightest); }
.ds-type-display-md { font: var(--ds-type-display-md); letter-spacing: var(--ds-tracking-tighter); }
.ds-type-display-sm { font: var(--ds-type-display-sm); letter-spacing: var(--ds-tracking-tighter); }

.ds-type-heading-lg { font: var(--ds-type-heading-lg); letter-spacing: var(--ds-tracking-tighter); }
.ds-type-heading-md { font: var(--ds-type-heading-md); letter-spacing: var(--ds-tracking-tight); }
.ds-type-heading-sm { font: var(--ds-type-heading-sm); letter-spacing: var(--ds-tracking-tight); }

.ds-type-body-lg { font: var(--ds-type-body-lg); letter-spacing: var(--ds-tracking-tight); }
.ds-type-body-md { font: var(--ds-type-body-md); letter-spacing: var(--ds-tracking-normal); }
.ds-type-body-sm { font: var(--ds-type-body-sm); letter-spacing: var(--ds-tracking-normal); }

.ds-type-body-md-strong { font: var(--ds-type-body-md-strong); letter-spacing: var(--ds-tracking-normal); }
.ds-type-body-sm-strong { font: var(--ds-type-body-sm-strong); letter-spacing: var(--ds-tracking-normal); }

.ds-type-label-lg { font: var(--ds-type-label-lg); letter-spacing: var(--ds-tracking-tight); }
.ds-type-label-md { font: var(--ds-type-label-md); letter-spacing: var(--ds-tracking-tight); }
.ds-type-label-sm { font: var(--ds-type-label-sm); letter-spacing: var(--ds-tracking-normal); }
.ds-type-label-xs { font: var(--ds-type-label-xs); letter-spacing: var(--ds-tracking-normal); }

.ds-type-caption-md { font: var(--ds-type-caption-md); letter-spacing: var(--ds-tracking-normal); }
.ds-type-caption-sm { font: var(--ds-type-caption-sm); letter-spacing: var(--ds-tracking-wide); }

.ds-type-eyebrow {
  font: var(--ds-type-eyebrow);
  letter-spacing: var(--ds-tracking-widest);
  text-transform: uppercase;
}

.ds-type-numeric-lg {
  font: var(--ds-type-numeric-lg);
  letter-spacing: var(--ds-tracking-tabular);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--ds-font-feature-tnum);
}
.ds-type-numeric-md {
  font: var(--ds-type-numeric-md);
  letter-spacing: var(--ds-tracking-tabular);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--ds-font-feature-tnum);
}
.ds-type-numeric-sm {
  font: var(--ds-type-numeric-sm);
  letter-spacing: var(--ds-tracking-tabular);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--ds-font-feature-tnum);
}


/* —— Workspace hierarchy (one shell per module page) —— */
.ds-workspace {
  margin-bottom: var(--ds-space-5);
}

.ds-workspace__section-header {
  /* paired with .workspace-module-head in markup */
}

.ds-workspace__mode-bar {
  /* paired with .workspace-subnav */
}

/* Page column: mode bar → toolbar → hero canvas */
.ds-page {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  margin-top: var(--ds-space-1);
  min-width: 0;
}

.ds-page__toolbar-cluster {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

.ds-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-space-3) var(--ds-space-4);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-glass-bg);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-glass);
  backdrop-filter: var(--ds-glass-blur);
  -webkit-backdrop-filter: var(--ds-glass-blur);
}

.ds-toolbar__filters {
  flex: 1;
  min-width: min(100%, 260px);
}

.ds-toolbar__actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  align-items: center;
  align-self: stretch;
  padding-left: var(--ds-space-3);
  margin-left: var(--ds-space-1);
  border-left: 1px solid var(--ds-color-divider);
}

.ds-toolbar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-2) var(--ds-space-4);
  padding-top: var(--ds-space-3);
  border-top: 1px solid var(--ds-color-divider);
}

.ds-toolbar__meta-hint {
  margin: 0;
  flex: 1;
  min-width: min(100%, 14rem);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-medium);
  color: var(--ds-color-text-secondary);
  line-height: var(--ds-leading-normal);
}

.ds-canvas {
  min-width: 0;
  flex: 1;
}

.ds-canvas-surface {
  background: var(--ds-color-bg-muted);
  border: 1px solid var(--ds-color-border-light);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
}

.ds-workspace-frame {
  background: var(--ds-glass-bg);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-xl);
  padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-5);
  box-shadow: var(--ds-shadow-glass);
  backdrop-filter: var(--ds-glass-blur);
  -webkit-backdrop-filter: var(--ds-glass-blur);
}

/* —— Buttons —— */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-control-height);
  padding: 0.4rem var(--ds-control-padding-x);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-semibold);
  line-height: 1.2;
  border-radius: var(--ds-button-radius);
  border: 1px solid rgba(0, 0, 0, 0.09);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ds-color-text);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--ds-duration-fast) var(--ds-ease-standard),
    border-color var(--ds-duration-fast) var(--ds-ease-standard),
    color var(--ds-duration-fast) var(--ds-ease-standard),
    box-shadow var(--ds-duration-fast) var(--ds-ease-standard),
    transform var(--ds-duration-fast) var(--ds-ease-standard);
  box-shadow: var(--ds-shadow-control-rest);
}

.ds-btn:hover {
  border-color: rgba(0, 0, 0, 0.14);
  background: #ffffff;
  box-shadow: var(--ds-shadow-control-hover);
  transform: translateY(-1px);
}

.ds-btn:focus-visible {
  outline: 2px solid var(--ds-color-focus-ring);
  outline-offset: 2px;
}

.ds-btn--primary {
  background: var(--ds-color-primary-command-bg);
  border-color: var(--ds-color-primary-command-bg);
  color: #fff;
  box-shadow: none;
}

.ds-btn--primary:hover {
  background: var(--ds-color-primary-command-bg-hover);
  border-color: var(--ds-color-primary-command-bg-hover);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

/* Workspace CTA: same blue action law as every other primary command. */
.ds-btn--toolbar {
  border-radius: var(--ds-button-radius);
  /* Outer height = .ds-segmented--ios pill track (final toolbar reference) */
  min-height: var(--ds-workspace-control-height);
  height: var(--ds-workspace-control-height);
  max-height: var(--ds-workspace-control-height);
  /* Reference parity: generous horizontal padding (~24px) */
  padding: 0 var(--ds-space-6);
  flex-shrink: 0;
  font-weight: var(--ds-font-semibold);
  letter-spacing: 0;
  line-height: 1;
  gap: var(--ds-space-2);
  background: var(--ds-color-toolbar-cta-bg);
  border-color: var(--ds-color-toolbar-cta-border);
  color: #fff;
  box-shadow: var(--ds-shadow-toolbar-cta);
  /* No background/opacity transitions: hover keeps the same solid ink (avoids “fading” feel). */
  transition: transform var(--ds-duration-toolbar-cta, 0.2s) var(--ds-ease-spring),
    box-shadow var(--ds-duration-toolbar-cta, 0.2s) var(--ds-ease-spring);
}

.ds-btn--toolbar svg {
  flex-shrink: 0;
  transform-origin: 50% 50%;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.ds-btn--toolbar:hover {
  background: var(--ds-color-toolbar-cta-bg-hover);
  border-color: var(--ds-color-toolbar-cta-border-hover);
  color: #fff;
  box-shadow: var(--ds-shadow-toolbar-cta-hover);
  transform: translateY(-1px);
}

.ds-btn--toolbar:hover svg {
  transform: rotate(90deg);
}

.ds-btn--toolbar:active {
  transform: translateY(1px);
  box-shadow: var(--ds-shadow-toolbar-cta-active);
}

.ds-btn--toolbar:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ds-color-bg-page), 0 0 0 4px var(--ds-color-focus-ring-ui);
}

@media (prefers-reduced-motion: reduce) {
  .ds-btn--toolbar,
  .ds-btn--toolbar:hover,
  .ds-btn--toolbar:active {
    transition-duration: 0.01ms;
    transform: none;
  }

  .ds-btn--toolbar:hover svg {
    transform: none;
  }
}

.ds-btn--secondary {
  background: var(--ds-color-bg-canvas);
  color: var(--ds-color-text);
  border-color: var(--ds-color-border);
}

.ds-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ds-color-text-secondary);
}

.ds-btn--ghost:hover {
  background: var(--ds-color-bg-muted);
  color: var(--ds-color-text);
}

.ds-btn--sm {
  min-height: var(--ds-control-height-sm);
  padding: 0.25rem 0.55rem;
  font-size: var(--ds-text-xs);
}

/* —— Fields —— */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  min-width: 128px;
}

.ds-field--grow {
  flex: 1;
  min-width: min(100%, 180px);
}

.ds-field__label {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-color-text-secondary);
}

.ds-input,
.ds-select {
  min-height: var(--ds-control-height);
  padding: 0.45rem 0.65rem;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-bg-canvas);
  color: var(--ds-color-text);
  transition:
    background-color var(--ds-duration-fast) var(--ds-ease-standard),
    border-color var(--ds-duration-fast) var(--ds-ease-standard),
    box-shadow var(--ds-duration-fast) var(--ds-ease-standard);
  box-shadow: none;
}

.ds-input:focus-visible,
.ds-select:focus-visible {
  outline: none;
  border-color: var(--ds-color-interactive);
  box-shadow: var(--ods-focus-ring-shadow);
  background: var(--ds-color-bg-canvas);
}

/* Search fields use command-sized corners and one quiet frame, including icon wrappers.
   Keep module geometry/validation intact; avoid a second frame on the nested input. */
:is(input[type="search"], input:is([type="text"], :not([type]))[class*="search"]):not([aria-invalid="true"]):not(.is-invalid):not(:invalid),
:is(label, div):is([class*="search"], :has(> input[type="search"]):has(> svg, > .ic, > .ti, > .platform-clickup-icon)):has(> input:is([type="search"], [type="text"], :not([type]))):not(:has(> input[aria-invalid="true"], > input.is-invalid, > input:invalid)) {
  border: 1px solid var(--ds-color-border-subtle) !important;
  border-radius: var(--ds-button-radius) !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box;
}
:is(label, div):is([class*="search"], :has(> input[type="search"]):has(> svg, > .ic, > .ti, > .platform-clickup-icon)):has(> input:is([type="search"], [type="text"], :not([type]))) {
  background-color: var(--c2-grp, var(--pos-subtle, var(--ds-color-bg-canvas)));
}
:is(label, div):is([class*="search"], :has(> input[type="search"]):has(> svg, > .ic, > .ti, > .platform-clickup-icon)):has(> input:is([type="search"], [type="text"], :not([type]))):not(:has(> input[aria-invalid="true"], > input.is-invalid, > input:invalid)) > input:is([type="search"], [type="text"], :not([type])):not([aria-invalid="true"]):not(.is-invalid):not(:invalid) {
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  caret-color: currentColor;
}
:is(input[type="search"], input:is([type="text"], :not([type]))[class*="search"]):not([aria-invalid="true"]):not(.is-invalid):not(:invalid):focus,
:is(label, div):is([class*="search"], :has(> input[type="search"]):has(> svg, > .ic, > .ti, > .platform-clickup-icon)):has(> input:is([type="search"], [type="text"], :not([type]))):not(:has(> input[aria-invalid="true"], > input.is-invalid, > input:invalid)):focus-within {
  border-color: color-mix(in srgb, var(--ds-color-text-secondary) 28%, var(--ds-color-bg-canvas)) !important;
  background-color: var(--ds-color-bg-canvas);
}
@media (prefers-contrast: more), (forced-colors: active) {
  :is(input[type="search"], input:is([type="text"], :not([type]))[class*="search"]):not(:is(label, div):is([class*="search"], :has(> input[type="search"]):has(> svg, > .ic, > .ti, > .platform-clickup-icon)) > input):not([aria-invalid="true"]):not(.is-invalid):not(:invalid):focus-visible,
  :is(label, div):is([class*="search"], :has(> input[type="search"]):has(> svg, > .ic, > .ti, > .platform-clickup-icon)):has(> input:is([type="search"], [type="text"], :not([type]))):not(:has(> input[aria-invalid="true"], > input.is-invalid, > input:invalid)):has(> input:focus-visible) {
    /* Strengthen the existing frame; an offset outline creates a second stroke. */
    border-color: var(--ds-color-interactive) !important;
    outline: none !important;
  }
}
@media (forced-colors: active) {
  :is(input[type="search"], input:is([type="text"], :not([type]))[class*="search"]):not(:is(label, div):is([class*="search"], :has(> input[type="search"]):has(> svg, > .ic, > .ti, > .platform-clickup-icon)) > input):not([aria-invalid="true"]):not(.is-invalid):not(:invalid):focus-visible,
  :is(label, div):is([class*="search"], :has(> input[type="search"]):has(> svg, > .ic, > .ti, > .platform-clickup-icon)):has(> input:is([type="search"], [type="text"], :not([type]))):not(:has(> input[aria-invalid="true"], > input.is-invalid, > input:invalid)):has(> input:focus-visible) { border-color: Highlight !important; }
}
html[data-app-contrast="high"] :is(input[type="search"], input:is([type="text"], :not([type]))[class*="search"]):not(:is(label, div):is([class*="search"], :has(> input[type="search"]):has(> svg, > .ic, > .ti, > .platform-clickup-icon)) > input):not([aria-invalid="true"]):not(.is-invalid):not(:invalid):focus-visible,
html[data-app-contrast="high"] :is(label, div):is([class*="search"], :has(> input[type="search"]):has(> svg, > .ic, > .ti, > .platform-clickup-icon)):has(> input:is([type="search"], [type="text"], :not([type]))):not(:has(> input[aria-invalid="true"], > input.is-invalid, > input:invalid)):has(> input:focus-visible) {
  border-color: var(--ds-color-interactive) !important;
  outline: none !important;
}

.ds-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ds-space-2) var(--ds-space-3);
}

/* —— Segmented / tabs (mode controls) —— */
.ds-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  align-items: center;
}

/* Shared mode-bar / segmented control (Appointments ds-segmented + legacy workspace-subnav links) */
.ds-segmented__link,
.workspace-subnav > a {
  display: inline-flex;
  align-items: center;
  padding: var(--ds-space-2) var(--ds-space-4);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  color: var(--ds-color-text-secondary);
  text-decoration: none;
  border: 1px solid var(--ds-color-border-light);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-bg-canvas);
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.ds-segmented__link:hover,
.workspace-subnav > a:hover {
  border-color: var(--ds-color-border);
  color: var(--ds-color-text);
  background: var(--ds-color-bg-subtle);
}

.ds-segmented__link[aria-current="page"],
.ds-segmented__link.is-active,
.workspace-subnav > a[aria-current="page"],
.workspace-subnav > a.is-active,
.workspace-subnav > a.workspace-subnav__link--active {
  color: var(--ds-color-text);
  font-weight: var(--ds-font-semibold);
  border-color: var(--ds-color-accent-border);
  background: var(--ds-color-accent-muted);
  box-shadow: var(--ds-shadow-xs);
}

/* iOS / macOS-style segmented control (compact track + white thumb) */
.ds-segmented--ios {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  height: var(--ds-workspace-control-height);
  padding: 2px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--ds-color-segmented-track);
  border-radius: var(--ds-radius-lg);
  border: none;
  box-shadow: none;
}

.ds-segmented--ios::-webkit-scrollbar {
  display: none;
}

.ds-segmented--ios .ds-segmented__link {
  display: inline-flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  min-width: min-content;
  min-height: 0;
  height: 100%;
  margin: 0;
  border: none;
  border-radius: var(--ds-radius-md);
  background: transparent;
  box-shadow: none;
  padding: 0 var(--ds-space-3);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  letter-spacing: 0;
  line-height: 1;
  color: var(--ds-color-text-secondary);
  white-space: nowrap;
  transition: color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
    background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ds-segmented--ios .ds-segmented__link:hover {
  color: var(--ds-color-text);
  background: rgba(255, 255, 255, 0.55);
}

html[data-app-theme="dark"] .ds-segmented--ios .ds-segmented__link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ds-segmented--ios .ds-segmented__link.is-active,
.ds-segmented--ios .ds-segmented__link[aria-current="page"] {
  color: #1d1d1f;
  font-weight: var(--ds-font-semibold);
  background: #ffffff;
  box-shadow: var(--ds-shadow-segmented-active);
}

/* Full pill track + stronger gray (reference toolbar) */
.ds-segmented--ios.ds-segmented--pill-track {
  padding: var(--ds-segmented-track-padding);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-segmented-track-strong);
  --ds-segmented-thumb-inset: var(--ds-segmented-thumb-inset-pill);
}

.ds-segmented--ios.ds-segmented--pill-track .ds-segmented__link {
  border-radius: var(--ds-radius-pill);
  transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* Flat hover: color only (no white wash) when pill + thumb — inactive only so active label stays ink on white thumb */
.ds-segmented--ios.ds-segmented--pill-track.ds-segmented--thumb .ds-segmented__link:hover:not(.is-active):not([aria-current="page"]) {
  color: var(--ds-color-text);
  background: transparent;
}

/* Sliding thumb (JS positions .ds-segmented__thumb); links stay <a href> for server nav */
.ds-segmented--ios.ds-segmented--thumb {
  position: relative;
}

.ds-segmented__thumb {
  position: absolute;
  top: var(--ds-segmented-thumb-inset);
  bottom: var(--ds-segmented-thumb-inset);
  left: 0;
  width: 0;
  border-radius: var(--ds-radius-pill);
  background: #ffffff;
  box-shadow: var(--ds-shadow-segmented-thumb);
  z-index: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform var(--ds-duration-segmented-thumb) var(--ds-ease-spring),
    width var(--ds-duration-segmented-thumb) var(--ds-ease-spring);
  will-change: transform, width;
}

.ds-segmented--ios.ds-segmented--thumb .ds-segmented__link {
  position: relative;
  z-index: 1;
}

.ds-segmented--thumb.ds-segmented--ios .ds-segmented__link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ds-color-focus-ring-ui);
}

/* After JS syncs thumb, drop per-link white fill to avoid double “pill” */
.ds-segmented--thumb.is-ds-thumb-ready .ds-segmented__link.is-active,
.ds-segmented--thumb.is-ds-thumb-ready .ds-segmented__link[aria-current="page"] {
  background: transparent;
  box-shadow: none;
  font-weight: var(--ds-font-semibold);
}

.ds-segmented--thumb.is-ds-thumb-ready .ds-segmented__link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ds-color-focus-ring-ui);
}

@media (prefers-reduced-motion: reduce) {
  .ds-segmented__thumb {
    transition-duration: 0.01ms !important;
  }
}

/*
 * Split pill — accent segment + label (reference: KPI chip with green cap).
 * Markup:
 *   <span class="ds-split-pill">
 *     <span class="ds-split-pill__accent">5.0 ★</span>
 *     <span class="ds-split-pill__label">Avg. rating</span>
 *   </span>
 * Use <a href="…"> or <button type="button"> with the same inner spans when interactive.
 */
.ds-split-pill {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  max-width: 100%;
  border-radius: var(--ds-radius-pill);
  overflow: hidden;
  box-shadow: var(--ds-shadow-xs);
  border: 1px solid var(--ds-split-pill-border);
  background: var(--ds-split-pill-body-bg);
}

.ds-split-pill__accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.3125rem 0.625rem;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-semibold);
  line-height: 1.2;
  color: #ffffff;
  background: linear-gradient(
    180deg,
    var(--ds-split-pill-accent-from) 0%,
    var(--ds-split-pill-accent-to) 100%
  );
  white-space: nowrap;
}

.ds-split-pill__label {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.75rem;
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-color-text);
  background: var(--ds-split-pill-body-bg);
  white-space: nowrap;
}

a.ds-split-pill,
button.ds-split-pill {
  appearance: none;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  margin: 0;
}

a.ds-split-pill:focus-visible,
button.ds-split-pill:focus-visible {
  outline: 2px solid var(--ds-color-focus-ring-ui);
  outline-offset: 2px;
}

a.ds-split-pill:hover,
button.ds-split-pill:hover {
  filter: brightness(0.98);
}

@media (prefers-reduced-motion: reduce) {
  a.ds-split-pill:hover,
  button.ds-split-pill:hover {
    filter: none;
  }
}

/* —— Page sub-header (module title + actions; reuse on any workspace) —— */
.ds-page-subheader {
  margin-bottom: var(--ds-space-4);
}

.ds-page-subheader__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3) var(--ds-space-4);
}

/*
 * When the row wraps, switch justification so controls do not get pinned
 * to the far right on their own line — which produces a large empty band
 * between title (line 1) and controls (line 2). flex-start keeps the
 * controls directly under the title with natural rhythm.
 */
@supports (selector(:has(*))) {
  .ds-page-subheader__row:has(.ds-page-subheader__controls:nth-child(2)) {
    row-gap: var(--ds-space-2);
  }
}

.ds-page-subheader__intro {
  min-width: min(100%, 14rem);
}

.ds-page-subheader__title {
  margin: 0;
  font-size: var(--ds-text-page-title);
  font-weight: var(--ds-font-semibold);
  letter-spacing: 0;
  color: var(--ds-color-text);
  line-height: 1.2;
}

.ds-page-subheader__subtitle {
  margin: 0.2rem 0 0;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-normal);
  color: var(--ds-color-text-secondary);
  line-height: var(--ds-leading-normal);
  max-width: 28rem;
}

.ds-page-subheader__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-4);
  margin-left: auto;
}

/* —— Cards / panels —— */
.ds-card {
  padding: var(--ds-space-4);
  background: var(--ds-glass-bg);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-glass);
  backdrop-filter: var(--ds-glass-blur);
  -webkit-backdrop-filter: var(--ds-glass-blur);
}

.ds-panel {
  padding: var(--ds-space-4);
  background: rgba(250, 250, 250, 0.9);
  border: 1px solid var(--ds-color-border-light);
  border-radius: var(--ds-radius-xl);
}

/* —— Tables (shared index pattern) —— */
.ds-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--ds-radius-xl);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: var(--ds-glass-blur);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  box-shadow: var(--ds-shadow-glass);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-text-sm);
}

.ds-table th,
.ds-table td {
  padding: var(--ds-space-3) var(--ds-space-4);
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: top;
}

.ds-table th {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-color-text-secondary);
  background: rgba(249, 250, 251, 0.7);
}

.ds-table tbody tr:hover td {
  background: rgba(0, 0, 0, 0.035);
}

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

/* —— Dropdown surface (popover menus; shell only) —— */
.ds-dropdown {
  min-width: 10rem;
  padding: var(--ds-space-2);
  background: var(--ds-glass-bg-strong);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-glass);
  backdrop-filter: var(--ds-glass-blur-strong);
  -webkit-backdrop-filter: var(--ds-glass-blur-strong);
}

/* —— Empty / loading / error —— */
.ds-state {
  margin: 0;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  color: var(--ds-color-text-secondary);
  line-height: var(--ds-leading-normal);
}

.ds-state--sm {
  font-size: var(--ds-text-xs);
  min-height: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.ds-state--loading {
  color: var(--ds-color-text-secondary);
}

.ds-state--error {
  color: var(--ds-color-danger);
}

.ds-state--success {
  color: var(--ds-color-success);
}

.ds-empty {
  padding: var(--ds-space-8);
  border: 1px dashed var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-bg-canvas);
  color: var(--ds-color-text-secondary);
  text-align: center;
  font-size: var(--ds-text-sm);
}

.ds-empty--error {
  color: var(--ds-color-danger);
  border-color: var(--ds-color-danger-bg);
  background: var(--ds-color-danger-bg);
}

/* —— Calendar day: appointment badge tokens (legend + grid strip) ——
 * Apple 2026 CALM palette: two muted semantic anchors (forest green / crimson)
 * for true lifecycle state, monochrome gray ladder for metadata and source
 * channels. No orange, no rainbow. Consumers use these as-is; all contrast
 * work is done by text weight and icon choice, not hue.                */
:root {
  /* Lifecycle — muted semantic */
  --cal-badge-cancelled: var(--ds-color-danger, #c41e3a);
  --cal-badge-no-show: var(--ds-color-danger, #c41e3a);
  --cal-badge-in-progress: #424245;
  --cal-badge-checked-in: var(--ds-color-success, #2d7a3e);
  --cal-badge-completed: var(--ds-color-success, #2d7a3e);

  /* Billing — muted semantic (monochrome for warning; green for paid) */
  --cal-badge-invoice-open: #424245;
  --cal-badge-invoice-partial: #424245;
  --cal-badge-invoice-paid: var(--ds-color-success, #2d7a3e);

  /* Metadata tags — monochrome gray ladder (distinction by label, not hue) */
  --cal-badge-new-client: #424245;
  --cal-badge-same-day: #1d1d1f;
  --cal-badge-prebooked: #424245;
  --cal-badge-locked: #6e6e73;
  --cal-badge-series: #424245;
  --cal-badge-booking-group: #1d1d1f;
  --cal-badge-booking-couple: #424245;
  --cal-badge-pref: #6e6e73;
  --cal-badge-notes: #424245;
  --cal-badge-buffer: #424245;

  /* Source channels — all monochrome; brand color of the channel is noise */
  --cal-badge-src-phone: #424245;
  --cal-badge-src-walk-in: #6e6e73;
  --cal-badge-src-website: #424245;
  --cal-badge-src-facebook: #424245;
  --cal-badge-src-instagram: #424245;
  --cal-badge-src-twitter: #424245;
  --cal-badge-src-referral: #424245;
  --cal-badge-src-other: #86868b;
}