/* ==========================================================================
   components.css  —  .c-* primitives (v1.0.0)
   Generic, composable, token-driven. No page-specific components.
   ========================================================================== */

/* ==========================================================================
   c-button
   ========================================================================== */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  min-width: var(--tap-min);
  padding-block: var(--btn-pad-y);
  padding-inline: var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-size: var(--fs-base);
  font-weight: var(--btn-font);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  border: var(--border-width) solid transparent;
  background: var(--color-surface-2);
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.c-button:hover { background: var(--color-border); }
.c-button:active { transform: scale(0.97); }       /* tactile press feedback   */

.c-button--brand {
  background: var(--brand);
  color: var(--color-on-brand);
}
.c-button--brand:hover { background: var(--brand-strong); }

.c-button--accent {
  background: var(--accent-a);
  color: var(--color-on-accent);
}
.c-button--accent:hover { filter: brightness(0.94); }

.c-button--ghost { background: transparent; }
.c-button--ghost:hover { background: var(--color-surface-2); }

.c-button--outline {
  background: transparent;
  border-color: var(--color-border-strong);
}
.c-button--outline:hover { background: var(--color-surface-2); }

.c-button--danger {
  background: var(--status-danger);
  color: #fff;
}
.c-button--danger:hover { filter: brightness(0.94); }

.c-button--sm { min-height: var(--control-h-sm); padding-inline: var(--space-4); font-size: var(--fs-sm); }
.c-button--lg { min-height: var(--control-h-lg); padding-inline: var(--space-6); font-size: var(--fs-md); }
.c-button--block { display: flex; width: 100%; }
.c-button--icon { padding-inline: 0; width: var(--control-h); aspect-ratio: 1; }

.c-button.is-disabled,
.c-button:disabled { opacity: 0.5; pointer-events: none; }

.c-button.is-loading { color: transparent; position: relative; pointer-events: none; }
.c-button.is-loading::after {
  content: ""; position: absolute; width: 1em; height: 1em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; color: var(--color-on-brand);
  animation: c-spin 0.6s linear infinite;
}
@keyframes c-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   c-field / label / input  (accessible form control)
   ========================================================================== */
.c-field { display: flex; flex-direction: column; gap: var(--space-2); }
.c-field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}
.c-input {
  width: 100%;
  min-height: var(--field-h);
  padding-inline: var(--field-pad-x);
  border-radius: var(--field-radius);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.c-input::placeholder { color: var(--color-text-subtle); }
.c-input:focus {
  outline: none;
  border-color: var(--accent-b);
  box-shadow: 0 0 0 3px var(--accent-b-soft);
  background: var(--color-surface);
}
.c-input.is-invalid {
  border-color: var(--status-danger);
  box-shadow: 0 0 0 3px var(--status-danger-soft);
}
.c-field__hint { font-size: var(--fs-xs); color: var(--color-text-subtle); }
.c-field__hint--error { color: var(--status-danger); }

.c-switch-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--accent-b) 8%);
  cursor: pointer;
}

.c-switch-field input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.c-switch-field__control {
  position: relative;
  flex: 0 0 auto;
  inline-size: 46px;
  block-size: 26px;
  border-radius: 999px;
  background: var(--color-border);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.c-switch-field__control::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}

.c-switch-field input:checked + .c-switch-field__control {
  background: var(--accent-b);
  box-shadow: inset 0 0 0 1px var(--accent-b);
}

.c-switch-field input:checked + .c-switch-field__control::after {
  transform: translateX(20px);
}

.c-switch-field:has(input:focus-visible) {
  outline: 3px solid var(--accent-b-soft);
  outline-offset: 2px;
}

/* ==========================================================================
   c-card
   ========================================================================== */
.c-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.c-card--compact { padding: var(--space-4); }
.c-card--raised { box-shadow: var(--shadow-md); border-color: transparent; }
.c-card--inset { background: var(--color-surface-2); }
.c-card--interactive { cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.c-card--interactive:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.c-card--interactive:active { transform: scale(0.995); }
.c-card.is-selected { border-color: var(--accent-a); box-shadow: 0 0 0 1px var(--accent-a); }

.c-card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.c-card__meta { font-size: var(--fs-sm); color: var(--color-text-muted); }
.c-card__stat { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }

.c-pipeline-card {
  padding: var(--space-3);
}

.c-pipeline-card__head {
  align-items: flex-start;
  gap: var(--space-3);
}

.c-pipeline-card__prompt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-pipeline-card__side {
  min-width: 128px;
  align-items: flex-end;
}

.c-pipeline-card__percent {
  font-size: 1.05rem;
}

.c-pipeline-card__progress {
  height: 7px;
}

.c-history-block {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.c-history-block__summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}

.c-history-block__summary::-webkit-details-marker {
  display: none;
}

.c-history-block__summary::before {
  content: "+";
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--accent-b);
}

.c-history-block[open] .c-history-block__summary::before {
  content: "-";
}

/* ==========================================================================
   c-badge  (status pills, counts)
   ========================================================================== */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  min-height: 22px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
.c-badge--success { background: var(--status-success-soft); color: var(--status-success); }
.c-badge--warning { background: var(--status-warning-soft); color: var(--status-warning); }
.c-badge--danger  { background: var(--status-danger-soft);  color: var(--status-danger); }
.c-badge--info    { background: var(--status-info-soft);    color: var(--accent-b); }
.c-badge--accent  { background: var(--brand-soft);          color: var(--brand-strong); }
.c-badge--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* ==========================================================================
   c-avatar
   ========================================================================== */
.c-avatar {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  overflow: hidden; flex-shrink: 0;
}
.c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.c-avatar--sm { width: 28px; height: 28px; font-size: var(--fs-xs); }
.c-avatar--lg { width: 48px; height: 48px; font-size: var(--fs-md); }

/* ==========================================================================
   c-sidebar  (the CRM side menu)
   ========================================================================== */
.c-sidebar {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  width: var(--sidebar-w);
  background: var(--color-surface);
  border-right: var(--border-width) solid var(--color-border);
  display: flex; flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-2);
  z-index: var(--z-sidebar);
}
.c-sidebar__brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-4);
  font-weight: var(--fw-bold); font-size: var(--fs-md);
}
.c-sidebar__brand-mark {
  width: 32px; height: 32px;
  display: block; flex-shrink: 0;
}
.c-sidebar__brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.c-sidebar__brand-title {
  line-height: 1.1;
}
.c-sidebar__brand-subtitle {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.c-auth-brand {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}
.c-auth-brand__mark {
  width: 72px;
  height: 72px;
  display: block;
}
.c-auth-brand__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.c-auth-brand__text {
  display: grid;
  gap: var(--space-1);
}
.c-auth-brand__meta {
  max-width: 28ch;
  color: var(--color-text-muted);
}
.c-sidebar__section {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
  padding: var(--space-4) var(--space-2) var(--space-1);
}
.c-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.c-sidebar__footer {
  margin-top: auto;
  padding-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.c-sidebar__footer .c-segment {
  justify-self: center;
}

.c-sidebar-user {
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}

.c-sidebar-user[hidden] {
  display: none;
}

.c-sidebar-user__label {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.c-sidebar-user__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.c-sidebar-user__email {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.c-navitem {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--control-h);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--fs-base); font-weight: var(--fw-medium);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.c-navitem:hover { background: var(--color-surface-2); color: var(--color-text); text-decoration: none; }
.c-navitem__icon { width: 20px; height: 20px; flex-shrink: 0; }
.c-navitem__badge { margin-left: auto; }
.c-navitem.is-active {
  background: var(--color-surface-2);
  color: var(--color-text);
  /* Orange indicator: a 2px left border flush with the sidebar edge */
  box-shadow: inset 2px 0 0 var(--brand);
}
.c-navitem.is-active .c-navitem__icon { color: var(--brand); }

/* off-canvas behaviour on tablet/mobile */
@media (max-width: 1024px) {
  .c-sidebar {
    position: fixed; inset: 0 auto 0 0;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-xl);
  }
  .c-sidebar.is-open { transform: translateX(0); }
}

/* ==========================================================================
   c-backdrop  (shared dimmer for modal + sidebar drawer)
   ========================================================================== */
.c-backdrop {
  position: fixed; inset: 0;
  background: var(--color-overlay);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
  z-index: var(--z-overlay);
}
.c-backdrop.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   c-topbar  (header inside main content)
   ========================================================================== */
.c-topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 64px;
  padding-inline: var(--space-5);
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: var(--border-width) solid var(--color-border);
}
.c-topbar__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.c-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.c-topbar__menu { display: none; }
@media (max-width: 1024px) {
  .c-topbar { padding-inline: var(--space-4); }
  .c-topbar__menu { display: inline-flex; }   /* hamburger appears */
}

/* ==========================================================================
   c-modal
   ========================================================================== */
.c-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--space-5);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.c-modal.is-open { opacity: 1; visibility: visible; }
.c-modal__dialog {
  width: 100%; max-width: var(--container-narrow);
  max-height: calc(100dvh - (var(--space-5) * 2));
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(8px) scale(0.98);
  transition: transform var(--dur-base) var(--ease-out);
}
.c-modal.is-open .c-modal__dialog { transform: none; }
.c-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.c-modal__title { font-size: var(--fs-xl); }
.c-modal__subtitle { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.c-modal__close {
  display: inline-grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  margin: calc(var(--space-2) * -1);
  border-radius: var(--radius-sm); color: var(--color-text-muted);
}
.c-modal__close:hover { background: var(--color-surface-2); color: var(--color-text); }
@media (max-width: 480px) {
  .c-modal { padding: 0; place-items: end stretch; }
  .c-modal__dialog {
    max-width: none;
    max-height: min(100dvh, 100vh);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-5);
  }
}

/* ==========================================================================
   c-alert  (inline status block) — HDR glow on icon badges only
   ========================================================================== */
.c-alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
}
.c-alert__icon {
  width: 24px; height: 24px; border-radius: var(--radius-pill);
  display: grid; place-items: center; flex-shrink: 0;
  color: #fff;
}
.c-alert__body { flex: 1; min-width: 0; }
.c-alert__title { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.c-alert__text { font-size: var(--fs-sm); color: var(--color-text-muted); }
.c-alert__close { color: var(--color-text-subtle); width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; margin: calc(var(--space-2) * -1); border-radius: var(--radius-sm); flex-shrink: 0; }
.c-alert__close:hover { color: var(--color-text); }

.c-alert--info    .c-alert__icon { background: var(--color-text); }
.c-alert--success .c-alert__icon { background: var(--status-success); box-shadow: var(--glow-success); }
.c-alert--warning .c-alert__icon { background: var(--status-warning); color: #1a1407; }
.c-alert--danger  .c-alert__icon { background: var(--status-danger);  box-shadow: var(--glow-danger); }

/* ==========================================================================
   c-toast  (transient notification) — stacked container + items
   ========================================================================== */
.c-toaster {
  position: fixed; z-index: var(--z-toast);
  right: var(--space-5); bottom: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  width: min(420px, calc(100vw - var(--space-6)));
  pointer-events: none;
}
@media (max-width: 480px) {
  .c-toaster { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); width: auto; }
}
.c-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-lg);
  animation: c-toast-in var(--dur-base) var(--ease-out);
}
.c-toast.is-leaving { animation: c-toast-out var(--dur-base) var(--ease-inout) forwards; }
.c-toast__icon { width: 24px; height: 24px; border-radius: var(--radius-pill); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.c-toast__body { flex: 1; min-width: 0; }
.c-toast__title { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.c-toast__text { font-size: var(--fs-sm); color: var(--color-text-muted); }
.c-toast--success .c-toast__icon { background: var(--status-success); box-shadow: var(--glow-success); }
.c-toast--danger  .c-toast__icon { background: var(--status-danger);  box-shadow: var(--glow-danger); }
.c-toast--info    .c-toast__icon { background: var(--accent-b); }
@keyframes c-toast-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes c-toast-out { to { opacity: 0; transform: translateX(16px); } }

/* ==========================================================================
   c-progress
   ========================================================================== */
.c-progress {
  height: 8px; border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  overflow: hidden;
}
.c-progress__bar {
  height: 100%; border-radius: inherit;
  background: var(--brand);
  transition: width var(--dur-slow) var(--ease-out);
}
.c-progress--accent .c-progress__bar { background: var(--accent-a); }
.c-progress--info   .c-progress__bar { background: var(--accent-b); }
.c-progress--danger .c-progress__bar { background: var(--status-danger); }

/* ==========================================================================
   c-url-list
   ========================================================================== */
.c-url-list {
  display: grid;
  gap: var(--space-2);
  max-height: 420px;
  overflow: auto;
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.c-url-list__item {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.c-url-list__item:hover {
  border-color: var(--accent-b);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-b) 12%, transparent);
  transform: translateY(-1px);
}

.c-url-list__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.c-url-list__meta,
.c-url-list__url {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.c-url-list__url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-codebox {
  min-height: 360px;
  max-height: 620px;
  overflow: auto;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ==========================================================================
   c-attachments
   ========================================================================== */
.c-file-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
}

.c-file-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.c-file-picker__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.c-file-picker__button:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.c-file-picker__input:focus-visible + .c-file-picker__button {
  border-color: var(--accent-b);
  box-shadow: 0 0 0 3px var(--accent-b-soft);
}

.c-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.c-attachment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: 28px;
  padding: 2px var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.c-attachment__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-attachment__meta {
  color: var(--color-text-subtle);
  white-space: nowrap;
}

/* ==========================================================================
   c-segment  (segmented control — used for Auto / Light / Dark toggle)
   ========================================================================== */
.c-segment {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--radius-xs);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
  gap: 2px;
}
.c-segment__btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 32px; padding-inline: var(--space-2);
  border-radius: calc(var(--radius-xs) - 2px);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.c-segment__btn:hover { color: var(--color-text); }
.c-segment__btn.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}
.c-segment__btn .c-navitem__icon,
.c-segment__btn svg { width: 14px; height: 14px; }