/* Ocean DS component recipes.
 * Import after colors_and_type.css.
 * Source: Figma Buttons/Button, node 3287:427074; audited 2026-07-14.
 */

.ocean-button {
  --button-height: var(--button-height-md);
  --button-padding-x: var(--button-padding-x-md);
  --button-gap: var(--button-gap-sm);
  --button-icon-size: var(--button-icon-md);
  --button-font-size: var(--font-size-label-sm);
  --button-line-height: var(--line-height-label-sm);
  --button-radius: var(--button-radius-default);

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: var(--button-gap);
  min-width: 0;
  height: var(--button-height);
  padding-block: 0;
  padding-inline: var(--button-padding-x);
  overflow: hidden;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--button-radius);
  font-family: var(--font-body);
  font-size: var(--button-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--button-line-height);
  letter-spacing: var(--letter-spacing-none);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--button-transition),
    border-color var(--button-transition),
    color var(--button-transition),
    box-shadow var(--button-transition);
}

.ocean-button > svg,
.ocean-button > img,
.ocean-button > .ocean-button__icon {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  flex: 0 0 var(--button-icon-size);
}

.ocean-button--xs {
  --button-height: var(--button-height-xs);
  --button-padding-x: var(--button-padding-x-xs);
  --button-icon-size: var(--button-icon-xs);
}

.ocean-button--sm {
  --button-height: var(--button-height-sm);
  --button-padding-x: var(--button-padding-x-sm);
  --button-icon-size: var(--button-icon-sm);
}

.ocean-button--lg {
  --button-height: var(--button-height-lg);
  --button-padding-x: var(--button-padding-x-lg);
  --button-gap: var(--button-gap-lg);
  --button-icon-size: var(--button-icon-lg);
  --button-font-size: var(--font-size-label-md);
  --button-line-height: var(--line-height-label-md);
}

.ocean-button--xl {
  --button-height: var(--button-height-xl);
  --button-padding-x: var(--button-padding-x-xl);
  --button-gap: var(--button-gap-lg);
  --button-icon-size: var(--button-icon-xl);
  --button-font-size: var(--font-size-label-lg);
  --button-line-height: var(--line-height-label-lg);
  --button-radius: var(--button-radius-xl);
}

.ocean-button--primary {
  color: var(--text-white);
  background: var(--bg-brand-solid);
}

.ocean-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--bg-brand-solid-hover);
}

.ocean-button--primary[data-state="hover"] {
  background: var(--bg-brand-solid-hover);
}

.ocean-button--secondary {
  color: var(--text-brand-primary);
  background: var(--bg-primary);
  border-color: var(--border-brand);
}

.ocean-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--bg-brand-primary);
  border-color: var(--border-brand-hover);
}

.ocean-button--secondary[data-state="hover"] {
  background: var(--bg-brand-primary);
  border-color: var(--border-brand-hover);
}

.ocean-button--tertiary {
  color: var(--text-tertiary);
  background: transparent;
}

.ocean-button--tertiary:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.ocean-button--tertiary[data-state="hover"] {
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.ocean-button--destructive {
  color: var(--text-white);
  background: var(--bg-error-solid);
  border-color: var(--border-error-solid);
}

.ocean-button--destructive:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--bg-error-solid-hover);
}

.ocean-button--link {
  width: auto;
  height: auto;
  padding: 0;
  overflow: visible;
  color: var(--text-brand-primary);
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-none);
}

.ocean-button--link:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--text-brand-secondary);
  text-decoration: underline;
}

.ocean-button:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-xs), var(--focus-ring);
}

.ocean-button[data-state="focused"] {
  box-shadow: var(--shadow-xs), var(--focus-ring);
}

.ocean-button:disabled,
.ocean-button[aria-disabled="true"] {
  color: var(--fg-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.ocean-button--primary:disabled,
.ocean-button--primary[aria-disabled="true"] {
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-xs);
}

.ocean-button--secondary:disabled,
.ocean-button--secondary[aria-disabled="true"] {
  background: var(--bg-primary);
  border-color: var(--border-secondary);
  box-shadow: var(--shadow-xs);
}

.ocean-button--tertiary:disabled,
.ocean-button--tertiary[aria-disabled="true"] {
  background: transparent;
}

.ocean-button[aria-busy="true"] {
  cursor: wait;
  pointer-events: none;
}

.ocean-button__spinner {
  box-sizing: border-box;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  flex: 0 0 var(--button-icon-size);
  border: var(--border-width-default) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: ocean-button-spin var(--duration-slower) linear infinite;
}

.ocean-button--icon-only {
  width: var(--button-icon-only-md);
  min-width: var(--button-icon-only-md);
  height: var(--button-icon-only-md);
  padding: 0;
}

.ocean-button--icon-only.ocean-button--sm {
  width: var(--button-icon-only-sm);
  min-width: var(--button-icon-only-sm);
  height: var(--button-icon-only-sm);
}

.ocean-button--icon-only.ocean-button--lg {
  width: var(--button-icon-only-lg);
  min-width: var(--button-icon-only-lg);
  height: var(--button-icon-only-lg);
}

.ocean-button--icon-only.ocean-button--xl {
  width: var(--button-icon-only-xl);
  min-width: var(--button-icon-only-xl);
  height: var(--button-icon-only-xl);
}

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

  .ocean-button__spinner {
    animation: none;
  }
}

@keyframes ocean-button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ══════════════════════════════════════════════════════════════
 * Recipes bổ sung — số đo lấy từ Figma 2026-07-14.
 * Chi tiết variant/kích thước: COMPONENT-SPECS.md
 * ════════════════════════════════════════════════════════════ */

/* ── Alert (1130:81134) ─────────────────────────────────────── */
.ocean-alert {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: var(--bg-primary);
  border: var(--border-width-default) solid var(--border-secondary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
}
.ocean-alert--full-width {
  border-radius: var(--radius-none);
  border-inline: 0;
  box-shadow: none;
}
.ocean-alert__icon { flex: 0 0 auto; color: var(--fg-tertiary); }
.ocean-alert--brand   .ocean-alert__icon { color: var(--fg-brand-primary); }
.ocean-alert--error   .ocean-alert__icon { color: var(--fg-error-primary); }
.ocean-alert--warning .ocean-alert__icon { color: var(--fg-warning-primary); }
.ocean-alert--success .ocean-alert__icon { color: var(--fg-success-primary); }
.ocean-alert__title {
  font-size: var(--font-size-label-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-label-md);
  color: var(--text-primary);
}
.ocean-alert__body {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--text-tertiary);
}

/* ── Modal (4057:415205) ────────────────────────────────────── */
.ocean-modal__overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: var(--backdrop-blur-md);
  display: grid;
  place-items: center;
  padding: var(--spacing-xl);
}
.ocean-modal {
  box-sizing: border-box;
  width: min(100%, 400px);
  padding: var(--spacing-3xl);
  background: var(--bg-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  font-family: var(--font-body);
}
.ocean-modal__title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-display-xs);
  color: var(--text-primary);
}
.ocean-modal__supporting {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--text-tertiary);
}
.ocean-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-3xl);
}
@media (max-width: 640px) {
  .ocean-modal__footer { flex-direction: column-reverse; }
  .ocean-modal__footer > .ocean-button { width: 100%; }
}

/* ── Dropdown / menu (3281:383083) ──────────────────────────── */
.ocean-menu {
  min-width: 240px;
  padding: var(--spacing-xs);
  background: var(--bg-primary);
  border: var(--border-width-default) solid var(--border-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
}
.ocean-menu__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  height: 32px;
  padding-inline: var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
}
.ocean-menu__item:hover,
.ocean-menu__item[data-state="active"] { background: var(--bg-primary-hover); }
.ocean-menu__item[aria-disabled="true"] { color: var(--text-disabled); pointer-events: none; }
.ocean-menu__divider { height: 1px; margin: var(--spacing-xs) 0; background: var(--border-secondary); }

/* ── Progress bar (1085:57382) ──────────────────────────────── */
.ocean-progress {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--bg-quaternary);
  overflow: hidden;
}
.ocean-progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--bg-brand-solid);
  transition: width var(--duration-normal) var(--ease-out);
}

/* ── File upload dropzone (139:335) ─────────────────────────── */
.ocean-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl) var(--spacing-3xl);
  background: var(--bg-primary);
  border: var(--border-width-default) solid var(--border-secondary);
  border-radius: var(--radius-xl);
  text-align: center;
  font-family: var(--font-body);
  cursor: pointer;
}
.ocean-dropzone:hover { background: var(--bg-secondary); }
.ocean-dropzone__cta {
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-brand-secondary);
}
.ocean-dropzone__hint {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  color: var(--text-tertiary);
}

/* ── Sidebar nav item (1152:89220) ──────────────────────────── */
.ocean-nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  height: 40px;
  padding-inline: var(--spacing-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
}
.ocean-nav-item > svg { color: var(--fg-quaternary); flex: 0 0 auto; }
.ocean-nav-item:hover { background: var(--bg-secondary); }
.ocean-nav-item[aria-current="page"] { background: var(--bg-active); color: var(--text-primary); }
.ocean-nav-item[aria-current="page"] > svg { color: var(--fg-brand-primary); }

/* ── Table (1227:110587) ────────────────────────────────────── */
.ocean-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-primary);
  font-family: var(--font-body);
}
.ocean-table thead th {
  padding: var(--spacing-lg) var(--spacing-3xl);
  background: var(--bg-secondary);
  border-bottom: var(--border-width-default) solid var(--border-secondary);
  font-size: var(--font-size-label-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-label-xs);
  color: var(--text-quaternary);
  text-align: left;
}
.ocean-table tbody td {
  padding: var(--spacing-lg) var(--spacing-3xl);
  border-bottom: var(--border-width-default) solid var(--border-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--text-secondary);
}
.ocean-table tbody tr:hover { background: var(--bg-primary-hover); }

/* ── Tabs (1118:69893) ──────────────────────────────────────── */
.ocean-tabs { display: flex; gap: var(--spacing-xs); font-family: var(--font-body); }
.ocean-tabs--underline { gap: 0; box-shadow: inset 0 -1px 0 var(--border-secondary); }
.ocean-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: 36px;
  padding-inline: var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-quaternary);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ocean-tab:hover { color: var(--text-secondary); }
.ocean-tab[aria-selected="true"] { color: var(--text-brand-secondary); background: var(--bg-brand-primary); }
.ocean-tabs--underline .ocean-tab { border-radius: 0; }
.ocean-tabs--underline .ocean-tab[aria-selected="true"] {
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--border-brand-primary);
}

/* ── Tag (3307:417515) ──────────────────────────────────────── */
.ocean-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  height: 24px;
  padding-inline: var(--spacing-md);
  background: var(--bg-primary);
  border: var(--border-width-default) solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}
.ocean-tag__count {
  padding-inline: var(--spacing-xs);
  background: var(--bg-tertiary);
  border-radius: var(--radius-xs);
}

/* ── Tooltip (1052:489) — dark surface ─────────────────────── */
.ocean-tooltip {
  max-width: 240px;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--gray-950);
  color: var(--text-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  font-size: var(--font-size-label-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-label-xs);
}
.ocean-tooltip__supporting { color: var(--gray-300); font-weight: var(--font-weight-medium); }

/* ── Toast / Notification (20521:4130) ─────────────────────── */
.ocean-toast {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: var(--bg-primary);
  border: var(--border-width-default) solid var(--border-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
}
.ocean-toast__title {
  font-size: var(--font-size-label-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.ocean-toast__body {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--text-tertiary);
}

/* ── Pagination (1115:68622) ────────────────────────────────── */
.ocean-pagination { display: flex; align-items: center; gap: var(--spacing-xs); font-family: var(--font-body); }
.ocean-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ocean-pagination--circle .ocean-pagination__item { border-radius: var(--radius-full); }
.ocean-pagination__item:hover { background: var(--bg-primary-hover); }
.ocean-pagination__item[aria-current="page"] { background: var(--bg-active); color: var(--text-primary); }

/* ── Empty state (1182:317) ─────────────────────────────────── */
.ocean-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xl);
  padding: var(--spacing-4xl);
  text-align: center;
  font-family: var(--font-body);
}
.ocean-empty__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.ocean-empty__body {
  max-width: 380px;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--text-tertiary);
}
.ocean-empty__actions { display: flex; gap: var(--spacing-lg); }

/* ── Breadcrumbs (1122:153) ─────────────────────────────────── */
.ocean-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-family: var(--font-body);
  font-size: var(--font-size-label-sm);
}
.ocean-breadcrumbs__item { color: var(--text-quaternary); text-decoration: none; }
.ocean-breadcrumbs__item:hover { color: var(--text-secondary); }
.ocean-breadcrumbs__item[aria-current="page"] { color: var(--text-secondary); font-weight: var(--font-weight-semibold); }
.ocean-breadcrumbs__sep { color: var(--fg-quaternary); }

/* ── Slider (1086:534) ──────────────────────────────────────── */
.ocean-slider { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--bg-quaternary); }
.ocean-slider__fill { position: absolute; height: 100%; border-radius: var(--radius-full); background: var(--bg-brand-solid); }
.ocean-slider__handle {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border: 2px solid var(--brand-600);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  cursor: grab;
}
.ocean-slider__handle:focus-visible { outline: 0; box-shadow: var(--shadow-md), var(--focus-ring); }

/* ── Content divider (1252:126874) ──────────────────────────── */
.ocean-divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-family: var(--font-body);
}
.ocean-divider::before,
.ocean-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-secondary); }
.ocean-divider__label {
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
}

/* ── Textarea (1238:278) ────────────────────────────────────── */
.ocean-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 180px;
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  border: var(--border-width-default) solid var(--border-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--text-primary);
  resize: vertical;
}
.ocean-textarea::placeholder { color: var(--text-placeholder); }
.ocean-textarea:focus-visible { outline: 0; border-color: var(--border-brand-primary); box-shadow: var(--focus-ring); }
.ocean-textarea:disabled { background: var(--bg-disabled-subtle); color: var(--text-disabled); }
.ocean-textarea--destructive { border-color: var(--border-error-subtle); }
.ocean-textarea--destructive:focus-visible { border-color: var(--border-error); box-shadow: var(--focus-ring-error); }

/* ── Verification code (1106:66757) ─────────────────────────── */
.ocean-otp { display: flex; gap: var(--spacing-md); }
.ocean-otp__cell {
  width: 80px;
  height: 80px;
  text-align: center;
  background: var(--bg-primary);
  border: var(--border-width-default) solid var(--border-primary);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: var(--font-size-display-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.ocean-otp__cell:focus-visible { outline: 0; border-color: var(--border-brand-primary); box-shadow: var(--focus-ring); }

/* ── Loading spinner (1192:610) ─────────────────────────────── */
.ocean-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-secondary);
  border-top-color: var(--fg-brand-primary);
  border-radius: var(--radius-full);
  animation: ocean-button-spin var(--duration-slower) linear infinite;
}
@media (prefers-reduced-motion: reduce) { .ocean-spinner { animation: none; } }

/* ── Progress circle / steps — cấu trúc SVG, xem COMPONENT-SPECS §17–18 ── */
.ocean-progress-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: var(--border-width-default) solid var(--border-primary);
  color: var(--fg-quaternary);
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-semibold);
}
.ocean-progress-step__icon--current { border-color: var(--fg-brand-primary); color: var(--fg-brand-primary); background: var(--bg-brand-primary); }
.ocean-progress-step__icon--complete { border-color: var(--bg-brand-solid); background: var(--bg-brand-solid); color: var(--text-white); }

/* ══ Batch 4 — app shells (COMPONENT-SPECS §26–34) ══════════ */

/* ── Metric item (1560:266217) ──────────────────────────────── */
.ocean-metric {
  box-sizing: border-box;
  padding: var(--spacing-2xl);
  background: var(--bg-primary);
  border: var(--border-width-default) solid var(--border-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-body);
}
.ocean-metric__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-tertiary); }
.ocean-metric__value {
  font-family: var(--font-display);
  font-size: var(--font-size-display-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.ocean-metric__change--up { color: var(--fg-success-primary); }
.ocean-metric__change--down { color: var(--fg-error-primary); }

/* ── Inline CTA (1255:131915) ───────────────────────────────── */
.ocean-inline-cta {
  padding: var(--spacing-3xl);
  background: var(--bg-secondary);
  border: var(--border-width-default) solid var(--border-secondary);
  border-radius: var(--radius-2xl);
  font-family: var(--font-body);
}
.ocean-inline-cta--brand { background: var(--bg-brand-primary); border-color: var(--border-brand-secondary); }
.ocean-inline-cta__title { font-size: var(--font-size-display-xs); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.ocean-inline-cta__body { font-size: var(--font-size-sm); color: var(--text-tertiary); }

/* ── Featured icon (Light style) ────────────────────────────── */
.ocean-featured-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--bg-brand-secondary);
  color: var(--fg-brand-primary);
}
.ocean-featured-icon--sm { width: 32px; height: 32px; }
.ocean-featured-icon--lg { width: 48px; height: 48px; }
.ocean-featured-icon--xl { width: 56px; height: 56px; }
.ocean-featured-icon--modern { border-radius: var(--radius-lg); }
.ocean-featured-icon--success { background: var(--bg-success-primary); color: var(--fg-success-primary); }
.ocean-featured-icon--warning { background: var(--bg-warning-primary); color: var(--fg-warning-primary); }
.ocean-featured-icon--error { background: var(--bg-error-primary); color: var(--fg-error-primary); }

/* ── Avatar group (1274:812) ────────────────────────────────── */
.ocean-avatar-group { display: inline-flex; align-items: center; }
.ocean-avatar-group > * { margin-left: -8px; border: 2px solid var(--bg-primary); border-radius: var(--radius-full); }
.ocean-avatar-group > *:first-child { margin-left: 0; }
.ocean-avatar-group__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-semibold);
}

/* ── Badge group / announcement (1046:8088) ─────────────────── */
.ocean-badge-group {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xxs) var(--spacing-md) var(--spacing-xxs) var(--spacing-xxs);
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--font-size-label-sm);
  color: var(--text-secondary);
}

/* ── Activity feed item (1254:128631) ───────────────────────── */
.ocean-feed-item { display: flex; gap: var(--spacing-lg); font-family: var(--font-body); }
.ocean-feed-item__connector { position: relative; }
.ocean-feed-item__connector::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 40px;
  bottom: -12px;
  width: 2px;
  transform: translateX(-50%);
  background: var(--border-secondary);
}
.ocean-feed-item__actor { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.ocean-feed-item__meta { font-size: var(--font-size-xs); color: var(--text-quaternary); }

/* ══ Batch 5 — data viz (COMPONENT-SPECS §35–39) ═══════════ */

/* Chart card wrapper + default brand-ramp series palette.
 * For multi-series categorical charts, override --chart-N with a
 * higher-contrast palette (see the dataviz skill). */
.ocean-chart-card {
  --chart-grid: var(--border-tertiary);
  --chart-axis: var(--border-secondary);
  --chart-label: var(--text-tertiary);
  --chart-1: var(--brand-700);
  --chart-2: var(--brand-500);
  --chart-3: var(--brand-300);
  --chart-4: var(--brand-600);
  --chart-5: var(--brand-400);
  padding: var(--spacing-2xl);
  background: var(--bg-primary);
  border: var(--border-width-default) solid var(--border-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-body);
}
.ocean-chart-card__axis { font-size: var(--font-size-xs); color: var(--chart-label); }
.ocean-chart-legend { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); font-size: var(--font-size-sm); color: var(--text-tertiary); }
.ocean-chart-legend__swatch { width: 8px; height: 8px; border-radius: var(--radius-full); }

/* ── Video player 16:9 (9264:576771) ────────────────────────── */
.ocean-video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #000000;
}
.ocean-video__overlay-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 128px;
  height: 128px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  color: var(--fg-white);
  background: var(--alpha-white-40);
  backdrop-filter: var(--backdrop-blur-md);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.ocean-video__controls {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  color: var(--fg-white);
  background: linear-gradient(to top, rgba(10,13,18,0.7), transparent);
}
.ocean-video__scrubber { flex: 1; height: 4px; border-radius: var(--radius-full); background: var(--alpha-white-20); }
.ocean-video__scrubber-fill { height: 100%; border-radius: var(--radius-full); background: var(--fg-white); }

/* ══ Batch 6 — mobile/Ocean (COMPONENT-SPECS §40–50) ═══════ */

/* ── Bottom sheet (20549:98568) ─────────────────────────────── */
.ocean-bottom-sheet {
  width: 100%;
  max-width: 416px;
  padding: var(--spacing-xl);
  background: var(--bg-primary);
  border-radius: var(--radius-4xl) var(--radius-4xl) 0 0;
  box-shadow: var(--shadow-xl);
  font-family: var(--font-body);
}
.ocean-bottom-sheet__handle {
  width: 36px;
  height: 4px;
  margin: 0 auto var(--spacing-xl);
  border-radius: var(--radius-full);
  background: var(--bg-quaternary);
}

/* ── Snack bar (20531:72515) ────────────────────────────────── */
.ocean-snackbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  height: 48px;
  padding-inline: var(--spacing-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
}
.ocean-snackbar--info    { background: var(--bg-brand-solid); color: var(--text-white); }
.ocean-snackbar--success { background: var(--bg-success-solid); color: var(--text-white); }
.ocean-snackbar--warning { background: var(--bg-warning-solid); color: var(--text-white); }
.ocean-snackbar--error   { background: var(--bg-error-solid); color: var(--text-white); }
.ocean-snackbar--surface { background: var(--bg-primary); color: var(--text-primary); border: var(--border-width-default) solid var(--border-secondary); }

/* ── Bottom nav (20542:98056) ───────────────────────────────── */
.ocean-bottom-nav {
  display: flex;
  height: 54px;
  background: var(--bg-primary);
  border-top: var(--border-width-default) solid var(--border-secondary);
  font-family: var(--font-body);
}
.ocean-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xxs);
  font-size: var(--font-size-label-xs);
  color: var(--text-quaternary);
  text-decoration: none;
}
.ocean-bottom-nav__item > svg { color: var(--fg-quaternary); }
.ocean-bottom-nav__item[aria-current="page"] { color: var(--text-brand-primary); }
.ocean-bottom-nav__item[aria-current="page"] > svg { color: var(--fg-brand-primary); }

/* ── ItemList row (20565:3719) ──────────────────────────────── */
.ocean-item-list-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  min-height: 57px;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--bg-primary);
  border-bottom: var(--border-width-default) solid var(--border-secondary);
  font-family: var(--font-body);
}
.ocean-item-list-row__title { font-size: var(--font-size-label-md); color: var(--text-primary); }
.ocean-item-list-row__sub { font-size: var(--font-size-sm); color: var(--text-tertiary); }
.ocean-item-list-row__value { margin-left: auto; font-size: var(--font-size-sm); color: var(--text-secondary); }
.ocean-item-list-row__arrow { color: var(--fg-quaternary); }

/* ── PIN dots (20440:7379) ──────────────────────────────────── */
.ocean-pin { display: flex; gap: var(--spacing-lg); }
.ocean-pin__dot { width: 16px; height: 16px; border-radius: var(--radius-full); border: 2px solid var(--border-primary); }
.ocean-pin__dot--filled { background: var(--bg-brand-solid); border-color: var(--border-brand-primary); }
.ocean-pin--error .ocean-pin__dot { border-color: var(--border-error); }

/* ══ Batch 7 — assets & decorative (COMPONENT-SPECS §51–54) ══ */

/* ── Verified tick (3302:418803) ────────────────────────────── */
.ocean-verified { display: inline-flex; width: 14px; height: 14px; color: var(--fg-brand-primary); }
.ocean-verified--sm { width: 12px; height: 12px; }
.ocean-verified--lg { width: 16px; height: 16px; }
.ocean-verified--xl { width: 18px; height: 18px; }
.ocean-verified--2xl { width: 20px; height: 20px; }

/* ── Company logo placeholder (bfd1f1c2) ────────────────────── */
.ocean-company-logo { color: var(--fg-quaternary); }
.ocean-company-logo--on-brand { color: var(--fg-white); }

/* ── Background pattern (25930becb) — decorative only ─────────
 * Grid behind a featured icon, fading out radially. Purely visual;
 * mark aria-hidden. Swap the mask for a dots/squares variant. */
.ocean-bg-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--border-secondary) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-secondary) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 70%);
          mask-image: radial-gradient(circle at center, #000 0%, transparent 70%);
}

/* ═══════════════════════════════════════════════════════════════
 * GAP-FILL — recipe thực thi còn thiếu cho Batch 3–7
 * (spec đã có trong COMPONENT-SPECS.md; đây là phần dựng-sẵn)
 * ═══════════════════════════════════════════════════════════════ */

/* ── Progress circle (§17) — set --value: 0..100 inline ─────── */
.ocean-progress-circle {
  --value: 0;
  --size: 240px;
  --thickness: 8px;
  width: var(--size);
  height: var(--size);
  border-radius: var(--radius-full);
  background:
    radial-gradient(closest-side, var(--bg-primary) calc(100% - var(--thickness)), transparent calc(100% - var(--thickness) + 1px)),
    conic-gradient(var(--bg-brand-solid) calc(var(--value) * 1%), var(--bg-quaternary) 0);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.ocean-progress-circle--xs { --size: 160px; }
.ocean-progress-circle--sm { --size: 200px; }
.ocean-progress-circle--lg { --size: 280px; }

/* ── Progress steps container (§18) ─────────────────────────── */
.ocean-steps { display: flex; align-items: flex-start; font-family: var(--font-body); }
.ocean-steps__item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.ocean-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: var(--border-secondary);
}
.ocean-steps__item--complete:not(:last-child)::after { background: var(--bg-brand-solid); }
.ocean-steps__label { margin-top: var(--spacing-md); font-size: var(--font-size-label-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.ocean-steps__desc { font-size: var(--font-size-sm); color: var(--text-tertiary); }

/* ── Code snippet (§22) — dark surface + mono ───────────────── */
.ocean-code {
  background: var(--gray-900);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}
.ocean-code__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--gray-950);
  color: var(--gray-300);
}
.ocean-code__body { display: block; padding: var(--spacing-lg); color: var(--gray-200); white-space: pre; overflow-x: auto; }
.ocean-code__copy { color: var(--gray-300); background: transparent; border: 0; cursor: pointer; }

/* ── File-type icon (§33) — document + label chip ───────────── */
.ocean-file-icon {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 32px;
  height: 40px;
  background: var(--bg-primary);
  border: var(--border-width-default) solid var(--border-primary);
  border-radius: var(--radius-xs);
  padding-bottom: var(--spacing-xs);
}
.ocean-file-icon__label {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--fg-white);
  padding: 1px 3px;
  border-radius: 2px;
}
.ocean-file-icon__label--pdf { background: var(--error-600); }
.ocean-file-icon__label--doc { background: var(--bg-brand-solid); }
.ocean-file-icon__label--xls { background: var(--success-600); }

/* ── Page / Card / Section header (§26) ─────────────────────── */
.ocean-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-xl);
  padding-block: var(--spacing-2xl);
  font-family: var(--font-body);
}
.ocean-page-header__title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.ocean-page-header__supporting { margin-top: var(--spacing-xs); font-size: var(--font-size-md); color: var(--text-tertiary); }
.ocean-page-header__actions { display: flex; gap: var(--spacing-lg); flex: 0 0 auto; }

.ocean-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding: var(--spacing-2xl);
  border-bottom: var(--border-width-default) solid var(--border-secondary);
  font-family: var(--font-body);
}
.ocean-card-header__title { font-family: var(--font-display); font-size: var(--font-size-display-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }

.ocean-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-xl);
  font-family: var(--font-body);
}
.ocean-section-header__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); }

/* ── Command bar / ⌘K (§28) ─────────────────────────────────── */
.ocean-command {
  width: min(100%, 640px);
  background: var(--bg-primary);
  border: var(--border-width-default) solid var(--border-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  font-family: var(--font-body);
}
.ocean-command__input {
  width: 100%;
  height: 52px;
  padding-inline: var(--spacing-xl);
  border: 0;
  border-bottom: var(--border-width-default) solid var(--border-secondary);
  font-size: var(--font-size-md);
  color: var(--text-primary);
}
.ocean-command__input::placeholder { color: var(--text-placeholder); }
.ocean-command__list { max-height: 320px; overflow-y: auto; padding: var(--spacing-xs); }
.ocean-command__footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: var(--border-width-default) solid var(--border-secondary);
  font-size: var(--font-size-xs);
  color: var(--text-quaternary);
}
.ocean-kbd {
  padding: 1px var(--spacing-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

/* ── Slide-out menu (§29) ───────────────────────────────────── */
.ocean-slideout {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(100%, 440px);
  background: var(--bg-primary);
  border-left: var(--border-width-default) solid var(--border-secondary);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
}
.ocean-slideout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xl);
  border-bottom: var(--border-width-default) solid var(--border-secondary);
}
.ocean-slideout__body { flex: 1; overflow-y: auto; padding: var(--spacing-xl); }

/* ── Charts (§35–38) — pure-CSS templates ───────────────────
 * Bar/donut/gauge render without JS. Line & radar need SVG paths
 * (data-driven) — see COMPONENT-SPECS §35/§37 + the dataviz skill. */
.ocean-bar-chart { display: flex; align-items: flex-end; gap: var(--spacing-md); height: 240px; }
.ocean-bar-chart__bar { flex: 1; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--chart-1, var(--brand-500)); }

.ocean-donut {
  --value: 0;
  --thickness: 32px;
  width: 240px;
  height: 240px;
  border-radius: var(--radius-full);
  background:
    radial-gradient(closest-side, var(--bg-primary) calc(100% - var(--thickness)), transparent calc(100% - var(--thickness) + 1px)),
    conic-gradient(var(--brand-500) calc(var(--value) * 1%), var(--bg-quaternary) 0);
}
.ocean-gauge {
  --value: 0;
  width: 240px;
  aspect-ratio: 2 / 1;
  border-radius: 240px 240px 0 0;
  background:
    radial-gradient(closest-side at 50% 100%, var(--bg-primary) calc(100% - 24px), transparent calc(100% - 23px)),
    conic-gradient(from 270deg at 50% 100%, var(--bg-brand-solid) calc(var(--value) * 0.5%), var(--bg-quaternary) 0);
}

/* ── NavigationBar (top app bar, §40) ───────────────────────── */
.ocean-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding-inline: var(--spacing-lg);
  background: var(--bg-primary);
  border-bottom: var(--border-width-default) solid var(--border-secondary);
  font-family: var(--font-body);
}
.ocean-navbar__title { font-size: var(--font-size-label-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.ocean-navbar--brand { background: var(--bg-brand-solid); border-color: transparent; }
.ocean-navbar--brand .ocean-navbar__title { color: var(--text-white); }

/* ── Carousel (§48) ─────────────────────────────────────────── */
.ocean-carousel { position: relative; }
.ocean-carousel__track {
  display: flex;
  gap: var(--spacing-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ocean-carousel__track::-webkit-scrollbar { display: none; }
.ocean-carousel__slide { flex: 0 0 100%; scroll-snap-align: center; border-radius: var(--radius-2xl); overflow: hidden; }
.ocean-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--bg-primary);
  border: var(--border-width-default) solid var(--border-secondary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.ocean-carousel__arrow--prev { left: var(--spacing-lg); }
.ocean-carousel__arrow--next { right: var(--spacing-lg); }

/* ── Action menu (mobile action sheet, §43) ─────────────────── */
.ocean-action-menu {
  width: min(100%, 262px);
  padding: var(--spacing-xs);
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
}
.ocean-action-menu__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-label-md);
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ocean-action-menu__item:hover { background: var(--bg-primary-hover); }
.ocean-action-menu__item--destructive { color: var(--text-error-primary); }

/* ── Dialog (biometric / normal, §44) ───────────────────────── */
.ocean-dialog {
  width: min(100%, 270px);
  padding: var(--spacing-2xl);
  background: var(--bg-primary);
  border-radius: 14px;
  box-shadow: var(--shadow-xl);
  text-align: center;
  font-family: var(--font-body);
}
.ocean-dialog__title { font-size: var(--font-size-label-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.ocean-dialog__body { margin-top: var(--spacing-xs); font-size: var(--font-size-sm); color: var(--text-tertiary); }

/* ── Text editor (§50) ──────────────────────────────────────── */
.ocean-editor {
  border: var(--border-width-default) solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-body);
  background: var(--bg-primary);
}
.ocean-editor__toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
  padding: var(--spacing-xs);
  border-bottom: var(--border-width-default) solid var(--border-secondary);
}
.ocean-editor__btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--fg-tertiary);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ocean-editor__btn:hover { background: var(--bg-secondary); }
.ocean-editor__btn[aria-pressed="true"] { background: var(--bg-active); color: var(--fg-brand-primary); }
.ocean-editor__content { min-height: 160px; padding: var(--spacing-lg); font-size: var(--font-size-md); line-height: var(--line-height-md); color: var(--text-primary); }

/* ── Segmented control (§55 · Figma 20599:3479) ──────────────
   A single-choice switch between 2–5 mutually exclusive views or
   values. Track holds a moving selected "pill".
   Markup: role="radiogroup" + role="radio"/aria-checked for a value
   picker; role="tablist" + role="tab"/aria-selected when each segment
   swaps a panel. Both attribute pairs are styled.
   All items are semibold at every state on purpose — swapping weight
   on selection reflows the track and makes the pill jitter.        */
.ocean-segmented {
  --segmented-height: var(--segmented-height-md);
  --segmented-padding-x: var(--segmented-padding-x-md);
  --segmented-icon-size: var(--segmented-icon-md);
  --segmented-radius: var(--segmented-radius-md);
  --segmented-item-radius: var(--segmented-item-radius-md);
  --segmented-font-size: var(--font-size-label-compact);
  --segmented-line-height: var(--line-height-label-compact);

  box-sizing: border-box;
  display: inline-flex;
  align-items: stretch;
  gap: var(--segmented-gap);
  height: var(--segmented-height);
  padding: var(--segmented-track-pad);
  background: var(--bg-tertiary);
  border-radius: var(--segmented-radius);
  font-family: var(--font-body);
}

.ocean-segmented__item {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  flex: 0 1 auto;
  min-width: 0;
  padding-block: 0;
  padding-inline: var(--segmented-padding-x);
  background: transparent;
  border: 0;
  border-radius: var(--segmented-item-radius);
  font-family: inherit;
  font-size: var(--segmented-font-size);
  line-height: var(--segmented-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-none);
  color: var(--text-tertiary);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--segmented-transition),
    color var(--segmented-transition),
    box-shadow var(--segmented-transition);
}

.ocean-segmented__item > svg,
.ocean-segmented__item > img,
.ocean-segmented__item > .ocean-segmented__icon {
  width: var(--segmented-icon-size);
  height: var(--segmented-icon-size);
  flex: 0 0 var(--segmented-icon-size);
}

/* label truncates inside its own segment rather than widening the track */
.ocean-segmented__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Selected ──────────────────────────────────────────────── */
.ocean-segmented__item[aria-checked="true"],
.ocean-segmented__item[aria-selected="true"],
.ocean-segmented__item[data-state="selected"] {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

/* ── Hover (unselected only) ───────────────────────────────── */
.ocean-segmented__item:hover:not([aria-checked="true"]):not([aria-selected="true"]):not([data-state="selected"]):not(:disabled):not([aria-disabled="true"]) {
  color: var(--text-secondary);
  background: var(--bg-active);
}
.ocean-segmented__item[data-state="hover"]:not([aria-checked="true"]):not([aria-selected="true"]) {
  color: var(--text-secondary);
  background: var(--bg-active);
}

/* ── Focus ─────────────────────────────────────────────────── */
.ocean-segmented__item:focus-visible,
.ocean-segmented__item[data-state="focused"] {
  outline: 0;
  box-shadow: var(--focus-ring);
  z-index: 1;
}
.ocean-segmented__item[aria-checked="true"]:focus-visible,
.ocean-segmented__item[aria-selected="true"]:focus-visible,
.ocean-segmented__item[aria-checked="true"][data-state="focused"],
.ocean-segmented__item[aria-selected="true"][data-state="focused"] {
  box-shadow: var(--shadow-xs), var(--focus-ring);
}

/* ── Disabled — single item ────────────────────────────────── */
.ocean-segmented__item:disabled,
.ocean-segmented__item[aria-disabled="true"] {
  color: var(--fg-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Disabled — whole control ──────────────────────────────── */
.ocean-segmented[aria-disabled="true"],
.ocean-segmented--disabled {
  background: var(--bg-disabled-subtle);
  pointer-events: none;
}
.ocean-segmented[aria-disabled="true"] .ocean-segmented__item,
.ocean-segmented--disabled .ocean-segmented__item {
  color: var(--fg-disabled);
  cursor: not-allowed;
}
.ocean-segmented[aria-disabled="true"] .ocean-segmented__item[aria-checked="true"],
.ocean-segmented[aria-disabled="true"] .ocean-segmented__item[aria-selected="true"],
.ocean-segmented--disabled .ocean-segmented__item[aria-checked="true"],
.ocean-segmented--disabled .ocean-segmented__item[aria-selected="true"] {
  background: var(--bg-primary);
  box-shadow: none;
}

/* ── Sizes ─────────────────────────────────────────────────── */
.ocean-segmented--sm {
  --segmented-height: var(--segmented-height-sm);
  --segmented-padding-x: var(--segmented-padding-x-sm);
  --segmented-icon-size: var(--segmented-icon-sm);
  --segmented-radius: var(--segmented-radius-sm);
  --segmented-item-radius: var(--segmented-item-radius-sm);
}
.ocean-segmented--lg {
  --segmented-height: var(--segmented-height-lg);
  --segmented-padding-x: var(--segmented-padding-x-lg);
  --segmented-icon-size: var(--segmented-icon-lg);
  --segmented-radius: var(--segmented-radius-lg);
  --segmented-item-radius: var(--segmented-item-radius-lg);
  --segmented-font-size: var(--font-size-label-md);
  --segmented-line-height: var(--line-height-label-md);
}
.ocean-segmented--xl {
  --segmented-height: var(--segmented-height-xl);
  --segmented-padding-x: var(--segmented-padding-x-xl);
  --segmented-icon-size: var(--segmented-icon-xl);
  --segmented-radius: var(--segmented-radius-xl);
  --segmented-item-radius: var(--segmented-item-radius-xl);
  --segmented-font-size: var(--font-size-label-md);
  --segmented-line-height: var(--line-height-label-md);
}

/* ── Full width — segments share the row equally ───────────── */
.ocean-segmented--full-width { display: flex; width: 100%; }
.ocean-segmented--full-width .ocean-segmented__item { flex: 1 1 0; }

/* ── Icon only — square segments, needs an accessible name ─── */
.ocean-segmented--icon-only .ocean-segmented__item,
.ocean-segmented__item--icon-only {
  padding-inline: 0;
  aspect-ratio: 1;
}

/* ── Brand style — solid selected pill ─────────────────────── */
.ocean-segmented--brand .ocean-segmented__item[aria-checked="true"],
.ocean-segmented--brand .ocean-segmented__item[aria-selected="true"],
.ocean-segmented--brand .ocean-segmented__item[data-state="selected"] {
  background: var(--bg-brand-solid);
  color: var(--text-white);
  box-shadow: none;
}
.ocean-segmented--brand .ocean-segmented__item[aria-checked="true"]:focus-visible,
.ocean-segmented--brand .ocean-segmented__item[aria-selected="true"]:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ── Dividers between unselected neighbours (Apple-style) ──── */
.ocean-segmented--dividers .ocean-segmented__item + .ocean-segmented__item::before {
  content: "";
  position: absolute;
  inset-block: 22%;
  inset-inline-start: calc(-1 * var(--segmented-gap) / 2 - 0.5px);
  width: 1px;
  background: var(--border-secondary);
}
.ocean-segmented--dividers .ocean-segmented__item[aria-checked="true"]::before,
.ocean-segmented--dividers .ocean-segmented__item[aria-selected="true"]::before,
.ocean-segmented--dividers .ocean-segmented__item[aria-checked="true"] + .ocean-segmented__item::before,
.ocean-segmented--dividers .ocean-segmented__item[aria-selected="true"] + .ocean-segmented__item::before {
  content: none;
}

/* ── Hidden native radios, when the group is a real form field ── */
.ocean-segmented__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ocean-segmented__input:checked + .ocean-segmented__item {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}
.ocean-segmented__input:focus-visible + .ocean-segmented__item {
  box-shadow: var(--shadow-xs), var(--focus-ring);
  z-index: 1;
}

/* ── Segmented control · dark mode ───────────────────────────
   In light mode the selected pill lifts off a grey track. The dark
   ramp has nothing lighter than --bg-tertiary, so the pill would
   land on --bg-primary (#0c0e12) and sink below its own track
   instead. Invert the pair: track drops to --bg-secondary and the
   pill takes --bg-tertiary, so the selected segment stays the
   lighter of the two. Drop this block once the dark palette gains a
   proper elevated tier (see COMPONENT-SPECS.md §55).              */
[data-theme="dark"] .ocean-segmented,
.dark .ocean-segmented {
  background: var(--bg-secondary);
}
[data-theme="dark"] .ocean-segmented__item[aria-checked="true"],
[data-theme="dark"] .ocean-segmented__item[aria-selected="true"],
[data-theme="dark"] .ocean-segmented__item[data-state="selected"],
[data-theme="dark"] .ocean-segmented__input:checked + .ocean-segmented__item,
.dark .ocean-segmented__item[aria-checked="true"],
.dark .ocean-segmented__item[aria-selected="true"],
.dark .ocean-segmented__item[data-state="selected"],
.dark .ocean-segmented__input:checked + .ocean-segmented__item {
  background: var(--bg-tertiary);
}
/* brand style keeps its solid fill in both themes */
[data-theme="dark"] .ocean-segmented--brand .ocean-segmented__item[aria-checked="true"],
[data-theme="dark"] .ocean-segmented--brand .ocean-segmented__item[aria-selected="true"],
.dark .ocean-segmented--brand .ocean-segmented__item[aria-checked="true"],
.dark .ocean-segmented--brand .ocean-segmented__item[aria-selected="true"] {
  background: var(--bg-brand-solid);
}
/* disabled group: the generic dark track rule above has the same specificity as
   the base disabled rule and would win on order, so restate it here. */
[data-theme="dark"] .ocean-segmented[aria-disabled="true"],
[data-theme="dark"] .ocean-segmented--disabled,
.dark .ocean-segmented[aria-disabled="true"],
.dark .ocean-segmented--disabled {
  background: var(--bg-disabled-subtle);
}
[data-theme="dark"] .ocean-segmented[aria-disabled="true"] .ocean-segmented__item[aria-checked="true"],
[data-theme="dark"] .ocean-segmented--disabled .ocean-segmented__item[aria-checked="true"],
.dark .ocean-segmented[aria-disabled="true"] .ocean-segmented__item[aria-checked="true"],
.dark .ocean-segmented--disabled .ocean-segmented__item[aria-checked="true"] {
  background: var(--bg-secondary);
}