@layer components {
  /* Application and page structure */
  .oc-app-shell {
    @apply flex min-h-screen flex-col;
    background: var(--oc-gradient-canvas);
  }

  .oc-app-grid {
    @apply pointer-events-none absolute inset-0 opacity-35;
    background-image: var(--oc-gradient-grid);
    background-size: 32px 32px;
  }

  .oc-page-hero {
    @apply border-b border-sky-100;
    background: var(--oc-gradient-page);
  }

  .oc-page-hero--soft {
    background: var(--oc-gradient-page-soft);
  }

  .oc-container {
    @apply mx-auto w-full px-4 sm:px-6 lg:px-8;
  }

  .oc-container--narrow {
    @apply max-w-4xl;
  }

  .oc-container--content {
    @apply max-w-6xl;
  }

  .oc-container--wide {
    @apply max-w-7xl;
  }

  .oc-page-hero__inner {
    @apply py-10;
  }

  .oc-page-hero__split {
    @apply grid gap-6;
  }

  @media (min-width: 900px) {
    .oc-page-hero__split {
      grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.9fr);
      align-items: start;
    }

    .oc-page-hero__split--stretch {
      align-items: stretch;
    }
  }

  .oc-page-content {
    @apply py-8;
  }

  .oc-page-eyebrow {
    @apply text-sm font-medium uppercase tracking-[0.24em] text-sky-700;
  }

  .oc-page-title {
    @apply mt-3 text-4xl font-bold text-slate-900;
  }

  .oc-page-description {
    @apply mt-4 max-w-2xl text-sm leading-7 text-slate-600;
  }

  .oc-brand-mark {
    @apply flex h-10 w-10 items-center justify-center border border-sky-200 bg-sky-100;
    box-shadow: var(--oc-shadow-sm);
  }

  /* Reusable text hierarchy */
  .oc-section-label {
    @apply text-xs uppercase tracking-[0.18em] text-slate-500;
  }

  .oc-stat-label {
    @apply text-xs uppercase tracking-[0.2em] text-slate-500;
  }

  .oc-stat-value {
    @apply mt-2 text-2xl font-bold text-slate-900;
  }

  .oc-meta {
    @apply text-sm text-slate-500;
  }

  .oc-field-label {
    @apply mb-1 block text-sm font-medium text-slate-700;
  }

  .oc-field-required {
    @apply text-rose-500;
  }

  .oc-field-control {
    @apply w-full border border-slate-300 bg-white px-3 py-2.5 text-sm text-slate-800 outline-none transition-colors;
    @apply focus:border-sky-500 focus:ring-2 focus:ring-sky-100;
  }

  .oc-field-error {
    @apply mt-1 text-sm text-rose-600;
  }

  .oc-field-help {
    @apply mt-1 text-sm text-slate-500;
  }

  /* Surfaces */
  .oc-panel-card {
    box-shadow: var(--oc-shadow-md) !important;
  }

  .oc-panel-card-xl {
    box-shadow: var(--oc-shadow-xl) !important;
  }

  .oc-floating-panel {
    box-shadow: var(--oc-shadow-lg);
  }

  .oc-panel-card-soft {
    box-shadow: 6px 6px 0 0 rgb(15 23 42 / 4%) !important;
  }

  .oc-empty-card {
    box-shadow: 6px 6px 0 0 rgb(15 23 42 / 4%);
  }

  .oc-surface {
    @apply border border-slate-200 bg-white;
    box-shadow: var(--oc-shadow-md);
  }

  .oc-modal-shell {
    @apply border border-slate-200 bg-white;
    box-shadow: var(--oc-shadow-xl);
  }

  .oc-inset-panel {
    @apply border border-slate-200 bg-slate-50 p-4;
  }

  .oc-map-button {
    @apply flex h-10 w-10 items-center justify-center border border-slate-200 bg-white text-slate-600;
    box-shadow: var(--oc-shadow-xs);
  }

  /* Shared interactive contracts */
  .oc-panel-button:not(.n-button),
  .oc-header-button,
  .oc-icon-button,
  .oc-map-button,
  .oc-choice-button,
  .oc-text-button,
  .oc-menu-item,
  .oc-nav-link,
  .oc-interactive-card {
    transition:
      background-color var(--oc-duration-fast) var(--oc-ease-standard),
      color var(--oc-duration-fast) var(--oc-ease-standard),
      border-color var(--oc-duration-fast) var(--oc-ease-standard),
      box-shadow var(--oc-duration-fast) var(--oc-ease-standard),
      transform var(--oc-duration-fast) var(--oc-ease-standard);
  }

  .oc-panel-button:not(.n-button) {
    @apply inline-flex min-h-9 items-center justify-center border px-3 py-2 text-sm font-medium;
  }

  .oc-panel-button:not(.n-button):not(:disabled):hover,
  .oc-header-button:not(:disabled):hover,
  .oc-icon-button:not(:disabled):hover,
  .oc-map-button:not(:disabled):hover,
  .oc-choice-button:not(:disabled):hover {
    transform: translate(-1px, -1px);
  }

  .oc-panel-button--neutral:not(.n-button) {
    @apply border-slate-200 bg-white text-slate-600;
    box-shadow: var(--oc-shadow-xs);
  }

  .oc-panel-button--neutral:not(.n-button):hover,
  .oc-panel-button--neutral:not(.n-button):focus-visible {
    @apply border-teal-200 bg-teal-50 text-teal-800;
    box-shadow: var(--oc-shadow-primary);
  }

  .oc-panel-button--sky:not(.n-button) {
    @apply border-sky-200 bg-sky-100 text-sky-800;
    box-shadow: var(--oc-shadow-sky);
  }

  .oc-panel-button--sky:not(.n-button):hover,
  .oc-panel-button--sky:not(.n-button):focus-visible {
    @apply border-sky-300 bg-sky-50 text-sky-900;
    box-shadow: 5px 5px 0 0 rgb(14 165 233 / 18%);
  }

  .oc-panel-button--teal:not(.n-button) {
    @apply border-teal-200 bg-teal-50 text-teal-800;
    box-shadow: var(--oc-shadow-teal);
  }

  .oc-panel-button--teal:not(.n-button):hover,
  .oc-panel-button--teal:not(.n-button):focus-visible {
    @apply border-teal-300 bg-teal-100 text-teal-900;
    box-shadow: var(--oc-shadow-primary-hover);
  }

  .oc-panel-button--danger:not(.n-button) {
    @apply border-rose-200 bg-rose-50 text-rose-700;
    box-shadow: 4px 4px 0 0 rgb(244 63 94 / 10%);
  }

  .oc-panel-button--danger:not(.n-button):hover,
  .oc-panel-button--danger:not(.n-button):focus-visible {
    @apply border-rose-300 bg-rose-100 text-rose-800;
    box-shadow: 5px 5px 0 0 rgb(244 63 94 / 14%);
  }

  .oc-panel-button--amber:not(.n-button) {
    @apply border-amber-200 bg-amber-50 text-amber-800;
    box-shadow: 4px 4px 0 0 rgb(245 158 11 / 10%);
  }

  .oc-panel-button--amber:not(.n-button):hover,
  .oc-panel-button--amber:not(.n-button):focus-visible {
    @apply border-amber-300 bg-amber-100 text-amber-900;
    box-shadow: 5px 5px 0 0 rgb(245 158 11 / 14%);
  }

  .oc-icon-button {
    @apply flex h-10 w-10 shrink-0 items-center justify-center border border-slate-200 bg-white text-slate-600;
    box-shadow: var(--oc-shadow-xs);
  }

  .oc-icon-button:hover,
  .oc-icon-button:focus-visible,
  .oc-map-button:hover,
  .oc-map-button:focus-visible {
    @apply border-teal-200 bg-teal-50 text-teal-800;
    box-shadow: var(--oc-shadow-primary);
  }

  .oc-icon-button--small {
    @apply h-8 w-8;
  }

  .oc-icon-button--tiny {
    @apply h-6 w-6 text-xs;
    box-shadow: 2px 2px 0 0 rgb(15 23 42 / 8%);
  }

  .oc-icon-button--sky {
    @apply border-sky-200 bg-sky-50 text-sky-700;
    box-shadow: 3px 3px 0 0 rgb(14 165 233 / 12%);
  }

  .oc-icon-button--sky:hover,
  .oc-icon-button--sky:focus-visible {
    @apply border-sky-300 bg-sky-100 text-sky-900;
    box-shadow: 4px 4px 0 0 rgb(14 165 233 / 16%);
  }

  .oc-icon-button--danger {
    @apply border-rose-300 bg-rose-500 text-white;
    box-shadow: 3px 3px 0 0 rgb(159 18 57 / 18%);
  }

  .oc-icon-button--danger:hover,
  .oc-icon-button--danger:focus-visible {
    @apply border-rose-400 bg-rose-600 text-white;
    box-shadow: 4px 4px 0 0 rgb(159 18 57 / 22%);
  }

  .oc-overlay-button {
    @apply flex shrink-0 items-center justify-center text-white/75 hover:bg-white/10 hover:text-white;
    transition:
      background-color var(--oc-duration-fast) var(--oc-ease-standard),
      color var(--oc-duration-fast) var(--oc-ease-standard),
      transform var(--oc-duration-fast) var(--oc-ease-standard);
  }

  .oc-text-button {
    @apply inline-flex items-center font-medium text-sky-700 underline-offset-4 hover:text-sky-900 hover:underline;
  }

  .oc-text-button--muted {
    @apply text-slate-500 hover:text-slate-800;
  }

  .oc-text-button--danger {
    @apply text-rose-600 hover:text-rose-800;
  }

  .oc-choice-button {
    @apply inline-flex min-h-9 items-center justify-center border px-3 py-2 text-sm font-medium;
  }

  .oc-choice-button--inactive {
    @apply border-slate-200 bg-white text-slate-600 hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800;
    box-shadow: var(--oc-shadow-xs);
  }

  .oc-choice-button--active {
    @apply border-teal-200 bg-teal-50 text-teal-800;
    box-shadow: var(--oc-shadow-primary);
  }

  .oc-menu-item {
    @apply flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm font-medium text-slate-700 hover:bg-teal-50 hover:text-teal-800;
  }

  .oc-menu-item--danger {
    @apply text-rose-600 hover:bg-rose-50 hover:text-rose-700;
  }

  .oc-menu-item--amber {
    @apply hover:bg-amber-50 hover:text-amber-700;
  }

  .oc-nav-link {
    @apply px-3 py-2 text-sm font-medium uppercase tracking-[0.12em];
  }

  .oc-header-button {
    @apply inline-flex h-8 items-center justify-center border px-3 text-sm font-medium md:h-10 md:px-4;
  }

  .oc-header-button--neutral {
    @apply border-slate-200 bg-white/80 text-slate-700 hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800;
    box-shadow: var(--oc-shadow-xs);
  }

  .oc-header-button--sky {
    @apply border-sky-200 bg-sky-100 text-sky-800 hover:border-sky-300 hover:bg-sky-50 hover:text-sky-900;
    box-shadow: var(--oc-shadow-sky);
  }

  .oc-header-button--teal {
    @apply border-teal-100 bg-white/80 text-teal-700 hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800;
    box-shadow: var(--oc-shadow-teal);
  }

  .oc-header-button:hover {
    box-shadow: 5px 5px 0 0 rgb(15 23 42 / 8%);
  }

  .oc-interactive-card:focus-visible {
    @apply outline-none ring-2 ring-sky-600 ring-offset-2;
  }

  .oc-interactive-card {
    box-shadow: var(--oc-shadow-md);
  }

  .oc-interactive-card:hover {
    box-shadow: var(--oc-shadow-lg);
  }

  .oc-interactive-card--selected {
    @apply border-sky-500;
    box-shadow: var(--oc-shadow-sky) !important;
  }

  .oc-interactive-row {
    transition:
      background-color var(--oc-duration-fast) var(--oc-ease-standard),
      color var(--oc-duration-fast) var(--oc-ease-standard),
      box-shadow var(--oc-duration-fast) var(--oc-ease-standard);
  }

  .oc-interactive-row:hover {
    @apply bg-sky-50/60;
  }

  .oc-interactive-row:focus-visible,
  .oc-heatmap-cell:focus-visible {
    @apply outline-none ring-2 ring-sky-600 ring-offset-2;
  }

  .oc-heatmap-cell {
    transition:
      border-color var(--oc-duration-fast) var(--oc-ease-standard),
      box-shadow var(--oc-duration-fast) var(--oc-ease-standard),
      transform var(--oc-duration-fast) var(--oc-ease-standard);
  }

  :is(
    .oc-primary-button,
    .oc-panel-button,
    .oc-header-button,
    .oc-icon-button,
    .oc-overlay-button,
    .oc-map-button,
    .oc-choice-button,
    .oc-text-button,
    .oc-menu-item,
    .oc-nav-link
  ):focus-visible {
    outline: 2px solid rgb(2 132 199);
    outline-offset: 2px;
  }

  .oc-overlay-button:focus-visible {
    outline-color: rgb(125 211 252);
  }

  :is(.oc-panel-button, .oc-header-button, .oc-icon-button, .oc-map-button, .oc-choice-button):disabled {
    @apply cursor-not-allowed border-slate-200 bg-slate-100 text-slate-400 shadow-none;
    transform: none !important;
  }

  .oc-map-button:disabled {
    box-shadow: var(--oc-shadow-xs);
  }

  :is(.oc-panel-button, .oc-primary-button, .oc-header-button, .oc-icon-button, .oc-map-button, .oc-choice-button):not(:disabled):active {
    transform: translate(0, 0);
  }

  .oc-system-page {
    @apply flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-10;
  }

  .oc-system-card {
    @apply w-full max-w-2xl border border-slate-200 bg-white px-8 py-14 text-center;
    box-shadow: var(--oc-shadow-xl);
  }

  /* Naive UI button contract */
  .oc-primary-button.n-button,
  .oc-panel-button.n-button {
    transition:
      background-color var(--oc-duration-fast) var(--oc-ease-standard),
      color var(--oc-duration-fast) var(--oc-ease-standard),
      border-color var(--oc-duration-fast) var(--oc-ease-standard),
      box-shadow var(--oc-duration-fast) var(--oc-ease-standard),
      transform var(--oc-duration-fast) var(--oc-ease-standard);
  }

  .oc-primary-button.n-button.n-button--disabled,
  .oc-panel-button.n-button.n-button--disabled {
    border-color: rgb(226 232 240) !important;
    background: rgb(241 245 249) !important;
    color: var(--oc-color-text-disabled) !important;
    box-shadow: none !important;
    opacity: 0.72;
    transform: none !important;
  }

  .oc-primary-button.n-button .n-button__content,
  .oc-panel-button.n-button .n-button__content {
    font-weight: 500;
  }

  .oc-primary-button.n-button .n-button__content {
    letter-spacing: 0.12em;
  }

  .oc-primary-button.n-button:not(.n-button--disabled):hover,
  .oc-panel-button.n-button:not(.n-button--disabled):hover,
  .oc-panel-button.n-button:focus-visible {
    transform: translate(-1px, -1px);
  }

  .oc-primary-button--teal.n-button {
    border-color: var(--color-teal-200) !important;
    background: white !important;
    color: var(--color-teal-700) !important;
    box-shadow: var(--oc-shadow-teal) !important;
  }

  .oc-primary-button--teal.n-button:hover,
  .oc-primary-button--teal.n-button:focus-visible {
    border-color: var(--color-teal-300) !important;
    background: var(--color-teal-50) !important;
    color: var(--color-teal-800) !important;
  }

  .oc-primary-button--teal.n-button:not(.n-button--disabled):hover {
    box-shadow: var(--oc-shadow-primary-hover) !important;
  }

  .oc-primary-button--sky.n-button {
    border-color: rgb(186 230 253) !important;
    background: rgb(255 255 255) !important;
    color: rgb(7 89 133) !important;
    box-shadow: var(--oc-shadow-sky) !important;
  }

  .oc-primary-button--sky.n-button:hover,
  .oc-primary-button--sky.n-button:focus-visible {
    border-color: rgb(125 211 252) !important;
    background: rgb(240 249 255) !important;
    color: rgb(12 74 110) !important;
  }

  .oc-primary-button--sky.n-button:not(.n-button--disabled):hover {
    box-shadow: 5px 5px 0 0 rgb(14 165 233 / 18%) !important;
  }

  .oc-panel-button.n-button {
    --n-color: white !important;
    --n-color-hover: var(--color-teal-50) !important;
    --n-color-pressed: var(--color-teal-100) !important;
    --n-border: 1px solid rgb(226 232 240) !important;
    --n-border-hover: 1px solid var(--color-teal-200) !important;
    --n-border-pressed: 1px solid var(--color-teal-300) !important;
    --n-text-color: rgb(71 85 105) !important;
    --n-text-color-hover: var(--color-teal-800) !important;
    --n-text-color-pressed: var(--color-teal-700) !important;
    border-color: rgb(226 232 240) !important;
    background: white !important;
    color: rgb(71 85 105) !important;
    box-shadow: var(--oc-shadow-xs) !important;
  }

  .oc-panel-button--neutral.n-button:hover,
  .oc-panel-button--neutral.n-button:focus-visible {
    border-color: var(--color-teal-200) !important;
    background: var(--color-teal-50) !important;
    color: var(--color-teal-800) !important;
    box-shadow: var(--oc-shadow-primary) !important;
  }

  .oc-panel-button--sky.n-button {
    --n-color: rgb(224 242 254) !important;
    --n-color-hover: rgb(240 249 255) !important;
    --n-color-pressed: rgb(224 242 254) !important;
    --n-border: 1px solid rgb(186 230 253) !important;
    --n-border-hover: 1px solid rgb(125 211 252) !important;
    --n-border-pressed: 1px solid rgb(56 189 248) !important;
    --n-text-color: rgb(7 89 133) !important;
    --n-text-color-hover: rgb(12 74 110) !important;
    --n-text-color-pressed: rgb(12 74 110) !important;
    border-color: rgb(186 230 253) !important;
    background: rgb(224 242 254) !important;
    color: rgb(7 89 133) !important;
    box-shadow: var(--oc-shadow-sky) !important;
  }

  .oc-panel-button--sky.n-button:hover,
  .oc-panel-button--sky.n-button:focus-visible {
    border-color: rgb(125 211 252) !important;
    background: rgb(240 249 255) !important;
    color: rgb(12 74 110) !important;
    box-shadow: 5px 5px 0 0 rgb(14 165 233 / 18%) !important;
  }

  .oc-panel-button--teal.n-button {
    --n-color: var(--color-teal-50) !important;
    --n-color-hover: var(--color-teal-100) !important;
    --n-color-pressed: var(--color-teal-200) !important;
    --n-border: 1px solid var(--color-teal-200) !important;
    --n-border-hover: 1px solid var(--color-teal-300) !important;
    --n-border-pressed: 1px solid var(--color-teal-400) !important;
    --n-text-color: var(--color-teal-700) !important;
    --n-text-color-hover: var(--color-teal-800) !important;
    --n-text-color-pressed: var(--color-teal-800) !important;
    border-color: var(--color-teal-200) !important;
    background: var(--color-teal-50) !important;
    color: var(--color-teal-700) !important;
    box-shadow: var(--oc-shadow-teal) !important;
  }

  .oc-panel-button--teal.n-button:hover,
  .oc-panel-button--teal.n-button:focus-visible {
    border-color: var(--color-teal-300) !important;
    background: var(--color-teal-100) !important;
    color: var(--color-teal-800) !important;
    box-shadow: var(--oc-shadow-primary-hover) !important;
  }

  .oc-panel-button--danger.n-button {
    --n-color: rgb(255 241 242) !important;
    --n-color-hover: rgb(255 228 230) !important;
    --n-color-pressed: rgb(255 228 230) !important;
    --n-border: 1px solid rgb(254 205 211) !important;
    --n-border-hover: 1px solid rgb(253 164 175) !important;
    --n-border-pressed: 1px solid rgb(251 113 133) !important;
    --n-text-color: rgb(190 24 93) !important;
    --n-text-color-hover: rgb(159 18 57) !important;
    --n-text-color-pressed: rgb(159 18 57) !important;
    border-color: rgb(254 205 211) !important;
    background: rgb(255 241 242) !important;
    color: rgb(190 24 93) !important;
    box-shadow: 4px 4px 0 0 rgb(244 63 94 / 10%) !important;
  }

  .oc-panel-button--danger.n-button:hover,
  .oc-panel-button--danger.n-button:focus-visible {
    border-color: rgb(253 164 175) !important;
    background: rgb(255 228 230) !important;
    color: rgb(159 18 57) !important;
    box-shadow: 5px 5px 0 0 rgb(244 63 94 / 14%) !important;
  }

  .oc-panel-button--amber.n-button {
    --n-color: rgb(255 251 235) !important;
    --n-color-hover: rgb(254 243 199) !important;
    --n-color-pressed: rgb(253 230 138) !important;
    --n-border: 1px solid rgb(253 230 138) !important;
    --n-border-hover: 1px solid rgb(252 211 77) !important;
    --n-border-pressed: 1px solid rgb(245 158 11) !important;
    --n-text-color: rgb(146 64 14) !important;
    --n-text-color-hover: rgb(120 53 15) !important;
    --n-text-color-pressed: rgb(120 53 15) !important;
    border-color: rgb(253 230 138) !important;
    background: rgb(255 251 235) !important;
    color: rgb(146 64 14) !important;
    box-shadow: 4px 4px 0 0 rgb(245 158 11 / 10%) !important;
  }

  .oc-panel-button--amber.n-button:hover,
  .oc-panel-button--amber.n-button:focus-visible {
    border-color: rgb(252 211 77) !important;
    background: rgb(254 243 199) !important;
    color: rgb(120 53 15) !important;
    box-shadow: 5px 5px 0 0 rgb(245 158 11 / 14%) !important;
  }
}