/*
  AV LÜ™ Operator Craft Interaction Depth v2.0.2
  Designed and owned by AVLU.
  © 2026 AVLU. All rights reserved.
*/

/* A selected desk tab moves visual attention, not merely an attribute. */
@media (min-width: 821px) {
  .operator-desk.has-tabs .operator-desk__panel {
    opacity: .72;
    filter: saturate(.78);
    transform: translateY(3px) scale(.992);
    transform-origin: center bottom;
    transition:
      opacity 180ms ease,
      filter 180ms ease,
      transform 220ms var(--oc-ease),
      border-color 180ms ease,
      box-shadow 220ms var(--oc-ease),
      background 180ms ease;
  }

  .operator-desk.has-tabs .operator-desk__panel.is-active {
    z-index: 2;
    opacity: 1;
    filter: none;
    border-color: var(--oc-blue-deep);
    background: #fffefb;
    box-shadow:
      inset 0 3px 0 var(--oc-rust),
      0 12px 24px rgba(17, 23, 29, .1);
    transform: translateY(-4px) scale(1.008);
  }

  html[data-theme="dark"] .operator-desk.has-tabs .operator-desk__panel.is-active {
    background: #252b30;
  }
}

.operator-desk__tabs button {
  position: relative;
  isolation: isolate;
}

.operator-desk__tabs button::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 4px;
  left: 9px;
  height: 2px;
  background: var(--oc-rust);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 170ms var(--oc-ease);
}

.operator-desk__tabs button[aria-selected="true"]::after {
  transform: scaleX(1);
}

/* The authorship sequence visibly records which stage the operator touched. */
.operator-step-button.is-complete:not([aria-selected="true"]) > span:first-child {
  color: var(--oc-green);
  border-color: var(--oc-green);
  background: var(--oc-green-soft);
}

.operator-step-button.is-complete:not([aria-selected="true"]) > span:first-child::before {
  content: "✓";
  font-size: .72rem;
}

.operator-step-button.is-complete:not([aria-selected="true"]) > span:first-child {
  font-size: 0;
}

.operator-workflow__stage {
  overflow: hidden;
}

.operator-workflow__stage::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: linear-gradient(
    to bottom,
    var(--oc-rust) 0,
    var(--oc-rust) calc(var(--operator-stage-progress, 20%) - 2px),
    var(--oc-rule) calc(var(--operator-stage-progress, 20%) - 2px),
    var(--oc-rule) 100%
  );
  transition: background 240ms ease;
}

.operator-workflow-panel.is-entering {
  animation: operator-panel-enter 260ms var(--oc-ease) both;
}

@keyframes operator-panel-enter {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

/* A single click leaves a restrained confirmation pulse on intentional controls. */
body.avlu-operator-craft [data-interaction-confirmed="true"] {
  animation: operator-confirm 300ms var(--oc-ease);
}

@keyframes operator-confirm {
  0% { filter: brightness(1); }
  42% { filter: brightness(1.12); }
  100% { filter: brightness(1); }
}

/* Inputs communicate focus and authorship with a drawn rule. */
body.avlu-operator-craft :is(input, select, textarea) {
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 180ms var(--oc-ease),
    transform 150ms var(--oc-ease);
}

body.avlu-operator-craft :is(input, select, textarea).is-operator-focused {
  border-color: var(--oc-blue-deep);
  box-shadow:
    inset 4px 0 0 var(--oc-blue),
    0 3px 0 rgba(17, 23, 29, .16),
    0 9px 18px rgba(36, 89, 168, .1);
  transform: translateY(-1px);
}

body.avlu-operator-craft :is(input, select, textarea).has-operator-value {
  background-image: linear-gradient(90deg, var(--oc-green) 0 4px, transparent 4px);
}

body.avlu-operator-craft :is(input[type="checkbox"], input[type="radio"]) {
  min-width: 20px;
  min-height: 20px;
  accent-color: var(--oc-blue-deep);
  box-shadow: none;
  transform: none;
}

body.avlu-operator-craft input[type="range"] {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  accent-color: var(--oc-rust);
}

/* Existing product controls receive the same precise response. */
body.avlu-operator-craft :is(
  .simulation-record-button,
  .review-history-card,
  .source-query-item,
  .v13-data-badge,
  .admin-export-link,
  .client-package-output,
  .review-handoff-card
) {
  transition:
    transform 150ms var(--oc-ease),
    border-color 150ms ease,
    box-shadow 170ms var(--oc-ease),
    background 150ms ease;
}

body.avlu-operator-craft :is(
  .simulation-record-button,
  .review-history-card,
  .source-query-item,
  .admin-export-link,
  .review-handoff-card
):hover {
  border-color: var(--oc-ink);
  box-shadow: 0 3px 0 rgba(17, 23, 29, .18), 0 12px 24px rgba(17, 23, 29, .08);
  transform: translateY(-2px);
}

body.avlu-operator-craft :is(
  .simulation-record-button,
  .review-history-card,
  .source-query-item,
  .admin-export-link,
  .review-handoff-card
):active {
  box-shadow: 0 1px 0 rgba(17, 23, 29, .2);
  transform: translateY(2px);
}

/* Text links feel drawn rather than generated. */
body.avlu-operator-craft main a:not(.v13-btn):not(.operator-key):not([role="button"]) {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .24em;
  transition: color 140ms ease, text-decoration-color 140ms ease, text-underline-offset 140ms var(--oc-ease);
}

body.avlu-operator-craft main a:not(.v13-btn):not(.operator-key):not([role="button"]):hover {
  color: var(--oc-blue-deep);
  text-decoration-color: currentColor;
  text-underline-offset: .34em;
}

/* Details announce their state cleanly. */
body.avlu-operator-craft details[data-operator-open="true"] {
  background: linear-gradient(90deg, var(--oc-blue-soft), transparent 64%);
}

body.avlu-operator-craft details > :not(summary) {
  animation: operator-detail-enter 190ms var(--oc-ease) both;
}

@keyframes operator-detail-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Saved and approved states are confident, not celebratory. */
.operator-record-row.is-saved {
  box-shadow: inset 4px 0 0 var(--oc-green);
}

.operator-suggestion__actions button[aria-pressed="true"] {
  color: var(--oc-white);
  border-color: var(--oc-ink);
  background: var(--oc-ink);
  box-shadow: 0 1px 0 var(--oc-ink);
  transform: translateY(1px);
}

.operator-suggestion__actions button[data-suggestion-action="accept"][aria-pressed="true"] {
  border-color: var(--oc-green);
  background: var(--oc-green);
}

.operator-suggestion__actions button[data-suggestion-action="reject"][aria-pressed="true"] {
  border-color: var(--oc-red);
  background: var(--oc-red);
}

/* Mobile selection is visibly connected to the selected panel. */
@media (max-width: 820px) {
  .operator-desk__tabs button[aria-selected="true"] {
    box-shadow: inset 0 -3px 0 var(--oc-rust);
  }

  .operator-desk__panel.is-active {
    animation: operator-mobile-panel-enter 220ms var(--oc-ease) both;
  }

  @keyframes operator-mobile-panel-enter {
    from { opacity: .35; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .operator-workflow-panel.is-entering,
  body.avlu-operator-craft [data-interaction-confirmed="true"],
  body.avlu-operator-craft details > :not(summary),
  .operator-desk__panel.is-active {
    animation: none !important;
  }
}