@layer modules {
  .ocr-upload {
    margin-bottom: 1.5rem;
  }

  .ocr-upload__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .ocr-upload__trigger {
    position: relative;
    --btn-gap: 0.75rem;
    --btn-padding: 0.625rem 1.25rem;
    --btn-radius: var(--radius-xl);
    --btn-font-weight: var(--font-weight-semibold);
  }

  .ocr-upload__icon {
    position: relative;
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-image: linear-gradient(to bottom right in oklab, var(--color-indigo-50) 0%, var(--color-slate-50) 100%);
    color: var(--color-indigo-600);
    transition: all 0.2s var(--default-transition-timing-function);

    .ocr-upload__trigger:hover & {
      background-image: linear-gradient(to bottom right in oklab, var(--color-indigo-100) 0%, var(--color-indigo-50) 100%);
    }
  }

  .ocr-upload__icon-svg {
    height: 1.125rem;
    width: 1.125rem;
  }

  .ocr-upload__sweep {
    position: absolute;
    inset-inline: 0.25rem;
    top: 50%;
    height: 1px;
    background-image: linear-gradient(to right in oklab, transparent 0%, var(--color-indigo-400) 50%, transparent 100%);
    opacity: 0;

    .ocr-upload__trigger:hover & {
      opacity: 1;
      animation: var(--animate-pulse);
    }
  }

  .ocr-upload__label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .ocr-upload__title {
    color: var(--color-slate-800);
  }

  .ocr-upload__subtitle {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-normal);
    color: var(--color-slate-400);
  }

  .ocr-upload__status {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
  }

  .ocr-results-slot {
    margin-top: 1.25rem;
  }

  .ocr-loading {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-indigo-100);
    background-image: linear-gradient(to bottom right in oklab, #eef2ffcc 0%, var(--color-slate-50) 100%);
    padding: 1.25rem;
  }

  .ocr-loading__track {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .ocr-loading__scan {
    position: absolute;
    inset-inline: 0;
    height: 1px;
    background-image: linear-gradient(to right in oklab, transparent 0%, #7d87ff99 50%, transparent 100%);
    animation: ocr-scan 2s ease-in-out infinite;
  }

  .ocr-loading__body {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .ocr-loading__icon {
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    box-shadow: 0 0 0 1px var(--color-indigo-100), 0 1px 3px 0 var(--color-black-10), 0 1px 2px -1px var(--color-black-10);
  }

  .ocr-loading__icon-svg {
    height: 1.25rem;
    width: 1.25rem;
    color: var(--color-indigo-600);
  }

  .ocr-loading__pulse {
    animation: var(--animate-pulse);
  }

  .ocr-loading__dim {
    opacity: 0.5;
  }

  .ocr-loading__text {
    flex: 1;
    min-width: 0;
    padding-top: 0.125rem;
  }

  .ocr-loading__heading {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-800);
  }

  .ocr-loading__detail {
    margin-top: 0.25rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-slate-500);
  }

  .ocr-loading__dots {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .ocr-loading__dot {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 3.40282e38px;
    background-color: var(--color-indigo-400);
    animation: 1s ease-in-out infinite pulse;
  }

  .ocr-loading__dot--delay-1 {
    animation: 1s ease-in-out 0.2s infinite pulse;
  }

  .ocr-loading__dot--delay-2 {
    animation: 1s ease-in-out 0.4s infinite pulse;
  }

  .ocr-results__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }

  .ocr-results__heading {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  .ocr-results__check {
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--color-emerald-100);
    color: var(--color-emerald-600);
  }

  .ocr-results__check-svg {
    height: 0.875rem;
    width: 0.875rem;
  }

  .ocr-results__title {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-800);
  }

  .ocr-results__count {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-400);
  }

  .ocr-results__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-400);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    &:hover {
      color: var(--color-slate-600);
    }
  }

  .ocr-results__list {
    max-height: 20rem;
    overflow-y: auto;
    padding-right: 0.25rem;

    & > :not(:last-child) {
      margin-block-end: 0.5rem;
    }
  }

  .ocr-results__page {
    position: sticky;
    top: 0;
    z-index: 10;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
    padding-block: 0.375rem;
    background-image: linear-gradient(to bottom in oklab, var(--color-white) 0%, var(--color-white) 50%, transparent 100%);
  }

  .ocr-results__page-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-slate-400);
  }

  .ocr-results__page-icon {
    height: 0.75rem;
    width: 0.75rem;
  }

  .ocr-results__block {
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-slate-200);
    background-color: var(--color-white);
    padding: 1rem;
    box-shadow: 0 1px 3px 0 var(--color-black-10), 0 1px 2px -1px var(--color-black-10);
    transition: all 0.2s var(--default-transition-timing-function);

    &:hover {
      border-color: var(--color-indigo-200);
      box-shadow: 0 4px 6px -1px var(--color-black-10), 0 2px 4px -2px var(--color-black-10);
    }
  }

  .ocr-results__accent {
    position: absolute;
    left: 0;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 0.125rem;
    border-radius: 3.40282e38px;
    background-image: linear-gradient(to bottom in oklab, var(--color-indigo-300) 0%, var(--color-indigo-100) 100%);
  }

  .ocr-results__text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-slate-700);
    padding-right: 2.5rem;
    white-space: pre-wrap;
  }

  .ocr-results__copy {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-slate-50);
    color: var(--color-slate-400);
    transition: all var(--default-transition-duration) var(--default-transition-timing-function);

    &:hover {
      background-color: var(--color-indigo-50);
      color: var(--color-indigo-600);
    }
  }

  .ocr-results__copy-svg {
    height: 1rem;
    width: 1rem;
  }

  /* Empty state uses the shared .empty-state--card; slate palette + detail
     margins layered on via the --ocr modifier. */
  .empty-state--ocr {
    --empty-state-card-bg: var(--color-slate-50-50);
    --empty-state-card-border: var(--color-slate-200);
    --empty-state-icon-bg: var(--color-slate-100);
    --empty-state-icon-color: var(--color-slate-400);
  }

  .empty-state--ocr .empty-state__title {
    margin-top: 0.75rem;
    color: var(--color-slate-500);
  }

  .empty-state--ocr .empty-state__text {
    margin-top: 0.25rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-slate-400);
  }

  .ocr-error {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-rose-100);
    background-image: linear-gradient(to bottom right in oklab, #fff1f2cc 0%, var(--color-slate-50) 100%);
    padding: 1.25rem;
  }

  /* Inline SVG grid background kept on the element. */
  .ocr-error__texture {
    position: absolute;
    inset: 0;
    opacity: 0.03;
  }

  .ocr-error__body {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .ocr-error__icon {
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    box-shadow: 0 0 0 1px var(--color-rose-100), 0 1px 3px 0 var(--color-black-10), 0 1px 2px -1px var(--color-black-10);
  }

  .ocr-error__icon-svg {
    height: 1.25rem;
    width: 1.25rem;
    color: var(--color-rose-500);
  }

  .ocr-error__text {
    flex: 1;
    min-width: 0;
    padding-top: 0.125rem;
  }

  .ocr-error__heading {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-800);
  }

  .ocr-error__message {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-slate-600);
  }

  .ocr-error__retry {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-rose-600);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    &:hover {
      color: var(--color-rose-700);
    }
  }

  .ocr-error__retry-svg {
    height: 0.875rem;
    width: 0.875rem;
  }

  .ocr-error__dismiss {
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-slate-400);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    &:hover {
      background-color: var(--color-rose-100);
      color: var(--color-rose-600);
    }
  }
}

@layer modules {
  /* Status message color, driven by data-ocr-upload-status state set in
     ocr_upload_controller#showStatus. */
  .ocr-upload__status {
    color: var(--color-slate-400);
  }

  .ocr-upload__status[data-ocr-upload-status="info"] {
    color: var(--color-indigo-600);
  }

  .ocr-upload__status[data-ocr-upload-status="error"] {
    color: var(--color-rose-600);
  }
}