/*
 * Origo 2026-07-26.2 component projection.
 * Source: migration/design/e1/opus/gallery.html
 * Upstream: 5c9a25a33a59e0c12365343fb82c7b294cb335f2
 *
 * These are the vetted core recipes consumed by Sibyl. Product-specific
 * composition belongs in app.css; core control states stay here.
 */
@layer reset, components;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :focus-visible {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  button,
  input,
  select,
  textarea {
    color: inherit;
    font: inherit;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  svg {
    display: block;
  }

  [hidden] {
    display: none !important;
  }

  .numeric {
    font-variant-numeric: var(--numeric);
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@layer components {
  [data-tone="ok"] {
    --tone-mark: var(--status-ok-mark);
    --tone-wash: var(--status-ok-wash);
    --tone-ink: var(--status-ok-ink);
    --tone-edge: var(--status-ok-edge);
    --tone-text: var(--status-ok);
  }

  [data-tone="warn"] {
    --tone-mark: var(--status-warn-mark);
    --tone-wash: var(--status-warn-wash);
    --tone-ink: var(--status-warn-ink);
    --tone-edge: var(--status-warn-edge);
    --tone-text: var(--status-warn);
  }

  [data-tone="fail"] {
    --tone-mark: var(--status-fail-mark);
    --tone-wash: var(--status-fail-wash);
    --tone-ink: var(--status-fail-ink);
    --tone-edge: var(--status-fail-edge);
    --tone-text: var(--status-fail);
  }

  [data-tone="info"] {
    --tone-mark: var(--status-info-mark);
    --tone-wash: var(--status-info-wash);
    --tone-ink: var(--status-info-ink);
    --tone-edge: var(--status-info-edge);
    --tone-text: var(--status-info);
  }

  [data-tone="active"] {
    --tone-mark: var(--status-active-mark);
    --tone-wash: var(--status-active-wash);
    --tone-ink: var(--status-active-ink);
    --tone-edge: var(--status-active-edge);
    --tone-text: var(--status-active);
  }

  [data-tone="neutral"] {
    --tone-mark: var(--status-neutral-mark);
    --tone-wash: var(--status-neutral-wash);
    --tone-ink: var(--status-neutral-ink);
    --tone-edge: var(--status-neutral-edge);
    --tone-text: var(--status-neutral);
  }

  .mark {
    width: var(--size-mark-dot);
    height: var(--size-mark-dot);
    flex: none;
    border-radius: var(--radius-circle);
    background: var(--tone-mark);
  }

  .mark[data-shape="ring"] {
    border: 2px solid var(--tone-mark);
    background: transparent;
  }

  .mark[data-shape="none"] {
    display: none;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: var(--size-control-height-base);
    gap: var(--gap-inline);
    padding-inline: var(--pad-control-inline);
    border: var(--border-hairline) solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    line-height: 1;
    transition:
      background-color var(--motion-swap) var(--ease-crisp),
      border-color var(--motion-swap) var(--ease-crisp),
      color var(--motion-swap) var(--ease-crisp),
      transform var(--motion-tap) var(--ease-crisp);
    white-space: nowrap;
  }

  .btn svg {
    width: var(--size-icon-base);
    height: var(--size-icon-base);
  }

  .btn[data-state="focused"] {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  .btn[data-variant="primary"] {
    background: var(--interactive);
    color: var(--text-on-interactive);
  }

  .btn[data-variant="primary"]:hover,
  .btn[data-variant="primary"][data-state="hover"] {
    background: var(--interactive-hover);
  }

  .btn[data-variant="primary"]:active,
  .btn[data-variant="primary"][data-state="pressed"] {
    background: var(--interactive-active);
    transform: scale(var(--scale-press));
  }

  .btn[data-variant="secondary"] {
    border-color: var(--edge-control);
    background: var(--surface-base);
    color: var(--text-primary);
  }

  .btn[data-variant="secondary"]:hover,
  .btn[data-variant="secondary"][data-state="hover"] {
    border-color: var(--edge-strong);
    background: var(--surface-hover);
  }

  .btn[data-variant="secondary"]:active,
  .btn[data-variant="secondary"][data-state="pressed"] {
    background: var(--surface-active);
    transform: scale(var(--scale-press));
  }

  .btn[data-variant="ghost"] {
    color: var(--text-secondary);
  }

  .btn[data-variant="ghost"]:hover,
  .btn[data-variant="ghost"][data-state="hover"] {
    background: var(--surface-hover);
    color: var(--text-primary);
  }

  .btn[data-variant="ghost"]:active,
  .btn[data-variant="ghost"][data-state="pressed"] {
    background: var(--surface-active);
    transform: scale(var(--scale-press));
  }

  .btn[data-variant="danger"] {
    background: var(--danger);
    color: var(--text-on-danger);
  }

  .btn[data-variant="danger"]:hover,
  .btn[data-variant="danger"][data-state="hover"] {
    background: var(--danger-hover);
  }

  .btn[data-variant="danger"]:active,
  .btn[data-variant="danger"][data-state="pressed"] {
    transform: scale(var(--scale-press));
  }

  .btn:disabled,
  .btn[data-state="disabled"] {
    border-color: var(--edge-default);
    background: var(--surface-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
    transform: none;
  }

  .btn[data-state="busy"] {
    cursor: progress;
  }

  .spinner {
    width: var(--size-icon-small);
    height: var(--size-icon-small);
    flex: none;
    border: var(--focus-width) solid currentColor;
    border-top-color: transparent;
    border-radius: var(--radius-circle);
    opacity: 0.85;
  }

  @media (prefers-reduced-motion: no-preference) {
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .spinner {
      animation: spin 700ms var(--ease-linear) infinite;
    }
  }

  .field {
    display: grid;
    gap: var(--gap-stack);
  }

  .field-label {
    color: var(--text-secondary);
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
  }

  .input {
    inline-size: 100%;
    block-size: var(--size-control-height-base);
    padding-inline: var(--pad-field-inline);
    border: var(--border-hairline) solid var(--edge-control);
    border-radius: var(--radius-control);
    background: var(--surface-base);
    color: var(--text-primary);
    transition:
      border-color var(--motion-swap) var(--ease-crisp),
      background-color var(--motion-swap) var(--ease-crisp);
  }

  .input::placeholder {
    color: var(--text-secondary);
  }

  .input:hover {
    border-color: var(--edge-strong);
  }

  .input:focus-visible,
  .field[data-state="focused"] .input {
    border-color: var(--edge-accent);
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  .field[data-state="invalid"] .input {
    border-color: var(--status-fail-mark);
    background: var(--status-fail-wash);
  }

  .field[data-state="readonly"] .input {
    background: var(--surface-inset);
    color: var(--text-secondary);
  }

  .field[data-state="disabled"] .input,
  .input:disabled {
    border-color: var(--edge-default);
    background: var(--surface-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
  }

  .field-hint {
    color: var(--text-tertiary);
    font-size: var(--text-caption);
  }

  .field-error {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-inline);
    color: var(--status-fail);
    font-size: var(--text-caption);
  }

  .field-error svg {
    width: var(--size-icon-small);
    height: var(--size-icon-small);
    flex: none;
  }

  .rows {
    overflow: hidden;
    border: var(--border-hairline) solid var(--edge-default);
    border-radius: var(--radius-panel);
    background: var(--surface-base);
  }

  .rows thead th {
    padding: var(--pad-cell-block) var(--pad-cell-inline);
    border-bottom: var(--border-hairline) solid var(--edge-default);
    background: var(--surface-raised);
    color: var(--text-tertiary);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-align: start;
    text-transform: uppercase;
  }

  .rows tbody tr {
    position: relative;
    border-bottom: var(--border-hairline) solid var(--edge-subtle);
    transition: background-color var(--motion-swap) var(--ease-crisp);
  }

  .rows tbody tr:last-child {
    border-bottom: 0;
  }

  .rows tbody tr:hover,
  .rows tr[data-state="hover"] {
    background: var(--surface-hover);
  }

  .rows tr[data-state="selected"] {
    background: var(--surface-selected);
  }

  .rows tbody td {
    min-block-size: var(--size-row-height);
    padding: var(--pad-cell-block) var(--pad-cell-inline);
    font-size: var(--text-body);
    vertical-align: middle;
  }

  .rows td:first-child {
    position: relative;
    padding-inline-start: calc(var(--pad-cell-inline) + var(--size-rail));
  }

  .rows tr[data-state="selected"] td:first-child::before {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--size-rail);
    background: var(--edge-accent);
    content: "";
  }

  .row-link {
    color: var(--text-primary);
    text-decoration: none;
  }

  .row-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  tr[data-state="selected"] .row-link {
    color: var(--text-emphasis);
    font-weight: var(--weight-medium);
  }

  .rows tbody tr:has(.row-link:focus-visible),
  .rows tbody tr[data-state="focused"] {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset-inset);
  }

  .rows .row-link:focus-visible {
    outline: none;
  }

  tr[data-state="disabled"] .row-link,
  tr[data-state="disabled"] .row-id {
    color: var(--text-disabled);
  }

  .row-meta {
    color: var(--text-tertiary);
    font-size: var(--text-caption);
    font-variant-numeric: var(--numeric);
    white-space: nowrap;
  }

  .cell-end {
    text-align: end;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    block-size: var(--size-badge-height);
    gap: var(--gap-inline);
    padding-inline: var(--pad-badge-inline);
    border: var(--border-hairline) solid transparent;
    border-radius: var(--radius-control);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }

  .badge[data-variant="dot"] {
    padding-inline: 0;
    background: transparent;
    color: var(--text-secondary);
  }

  .badge[data-variant="soft"] {
    border-color: var(--tone-edge);
    background: var(--tone-wash);
    color: var(--tone-ink);
  }

  .badge[data-variant="solid"] {
    background: var(--tone-mark);
    color: var(--text-on-interactive);
  }

  .panel {
    padding: var(--pad-panel);
    border: var(--border-hairline) solid var(--edge-default);
    border-radius: var(--radius-panel);
    background: var(--surface-base);
    box-shadow: var(--elevation-flat);
    transition:
      border-color var(--motion-swap) var(--ease-standard),
      box-shadow var(--motion-swap) var(--ease-standard);
  }

  a.panel {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  a.panel:hover {
    border-color: var(--edge-strong);
    box-shadow: var(--elevation-raised);
  }

  .eyebrow {
    color: var(--text-tertiary);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
  }

  .panel-title {
    font-size: var(--text-title);
    letter-spacing: var(--tracking-title);
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-hair);
  }

  .nav-item {
    position: relative;
    padding: var(--pad-control-block) var(--pad-control-inline);
    border-radius: var(--radius-control) var(--radius-control) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: color var(--motion-swap) var(--ease-crisp);
  }

  .nav-item::after {
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 50%;
    block-size: var(--size-rail);
    border-radius: var(--radius-pill);
    background: transparent;
    content: "";
    transition:
      inset-inline var(--motion-swap) var(--ease-standard),
      background-color var(--motion-swap) var(--ease-crisp);
  }

  .nav-item:hover {
    color: var(--text-primary);
  }

  .nav-item:hover::after {
    inset-inline: var(--gap-inline);
    background: var(--edge-default);
  }

  .nav-item[aria-current="page"] {
    color: var(--text-emphasis);
  }

  .nav-item[aria-current="page"]::after {
    inset-inline: var(--gap-inline);
    background: var(--edge-accent);
  }

  .nav-item:focus-visible {
    outline-offset: var(--focus-offset-inset);
  }
}