/* Local interaction pass: keep the approved composition and color roles. */
:root {
  --ease: cubic-bezier(.23, 1, .32, 1);
  --motion-press: 120ms;
  --motion-feedback: 200ms;
  --motion-transfer: 240ms;
}

/* The hit box stays still. Fill and arrow move inside it. */
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: inset 0 1px 0 #ffffff1a, 0 2px 3px #1433440b;
  transition: transform var(--motion-press) var(--ease);
}
.button:hover { background: var(--ink); transform: none; }
.button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #2d4e5b;
  transform: translateX(-101%);
  transition: transform var(--motion-feedback) var(--ease);
}
.button-label { transition: transform var(--motion-feedback) var(--ease); }
.button-arrow {
  position: relative;
  display: inline-flex;
  flex: none;
  width: 18px;
  height: 18px;
  overflow: hidden;
  color: #e8d4a4;
}
.button-arrow .icon {
  position: absolute;
  inset: 0;
  transition: transform var(--motion-feedback) var(--ease);
}
.button-arrow .icon:last-child { transform: translateX(-135%); }
.button-light, .button-light:hover { background: #eee2c3; }
.button-light::before { background: #f8efdb; }
.button-light .button-arrow { color: var(--ink); }
.button:active { transform: scale(.98); }
.text-link .icon { transition: transform var(--motion-feedback) var(--ease); }
.text-link:hover { text-decoration: none; }
.text-link { text-underline-offset: 5px; text-decoration-color: transparent; }
.nav-sections a { position: relative; }
.nav-sections a::after {
  content: '';
  position: absolute;
  height: 1px;
  bottom: 5px;
  inset-inline: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-feedback) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover::before { transform: translateX(0); }
  .button:hover .button-label { transform: translateX(-2px); }
  .button:hover .button-arrow .icon:first-child { transform: translateX(135%); }
  .button:hover .button-arrow .icon:last-child { transform: translateX(0); }
  .text-link:hover { text-decoration: underline; text-decoration-color: #bb914b80; }
  .text-link:hover .icon { transform: translateX(4px); }
  .nav-sections a:hover::after { transform: scaleX(1); }
}

.tab-list { position: relative; }
.tab-list.has-indicator button[aria-selected=true] { border-bottom-color: transparent; }
.tab-list button { transition: color var(--motion-feedback) var(--ease); }
.tab-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 2px;
  background: var(--gold);
  transform-origin: left center;
  pointer-events: none;
  transition: transform var(--motion-transfer) var(--ease);
}
.tab-list.instant .tab-indicator { transition: none; }
.panel-stage { display: grid; overflow: hidden; }
.panel-stage .tab-panel {
  grid-area: 1 / 1;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  animation: none;
  transition: opacity 180ms ease 60ms, transform var(--motion-transfer) var(--ease), visibility 0s;
}
/* Inactive panels reserve the same stage but are inert and aria-hidden. */
.panel-stage .tab-panel[hidden] {
  display: grid;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 100ms ease, transform var(--motion-transfer) var(--ease), visibility 0s 100ms;
}
.panel-stage.instant .tab-panel { transition: none; }
.project-task { position: relative; transition: background-color var(--motion-feedback) var(--ease); }
.project-task::before {
  content: '';
  position: absolute;
  left: 0;
  inset-block: 15px;
  width: 3px;
  background: #a88a52;
  opacity: 0;
  transform: scaleY(.45);
  transition: opacity var(--motion-feedback) ease, transform var(--motion-feedback) var(--ease);
}
.project-task.selected { box-shadow: none; }
.project-task.selected::before { opacity: 1; transform: scaleY(1); }
.project-task.selected .task-ring { border-color: #ab8b50; background: #d7c79f40; }
.project-task:focus-visible { outline-offset: -5px; }
.project-task:hover { background: transparent; }
.project-task.selected:hover { background: #e5ebe1; }
.work-stage.instant .project-task, .work-stage.instant .project-task::before { transition: none; }
.task-size-probe {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .project-task:hover { background: #edf0e8; }
  .project-task.selected:hover { background: #e5ebe1; }
}

/* No extra motion on keyboard actions; no hover dependence on touch. */
:root[data-motion=reduce] { scroll-behavior: auto; }
:root[data-motion=reduce] *, :root[data-motion=reduce] *::before, :root[data-motion=reduce] *::after {
  transition: none !important;
  animation: none !important;
}
:root[data-motion=reduce] .button:active,
:root[data-motion=reduce] .button:hover .button-label,
:root[data-motion=reduce] .text-link:hover .icon { transform: none; }
:root[data-motion=reduce] .button::before { transform: none; opacity: 0; }
:root[data-motion=reduce] .button:hover::before { opacity: 1; }
:root[data-motion=reduce] .button:hover .button-arrow .icon:first-child { transform: none; }
:root[data-motion=reduce] .button .button-arrow .icon:last-child { display: none; }
:root[data-motion=reduce] .panel-stage .tab-panel[hidden] { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .button:active, .button:hover .button-label, .text-link:hover .icon { transform: none; }
  .button::before { transform: none; opacity: 0; }
  .button:hover::before { opacity: 1; }
  .button:hover .button-arrow .icon:first-child { transform: none; }
  .button .button-arrow .icon:last-child { display: none; }
  .panel-stage .tab-panel[hidden] { transform: none; }
}