/* StovePilot motion system
   Quiet, functional movement: small distances, fast response, no decorative flourish. */
:root{
  --sp-motion-fast:150ms;
  --sp-motion-base:240ms;
  --sp-motion-slow:420ms;
  --sp-motion-ease:cubic-bezier(.22,1,.36,1);
  --sp-motion-ease-soft:cubic-bezier(.2,.72,.28,1);
}

@keyframes sp-view-settle{
  from{opacity:0;transform:translate3d(0,8px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes sp-row-settle{
  from{opacity:0;transform:translate3d(0,7px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes sp-reveal{
  from{opacity:0;transform:translate3d(0,-4px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes sp-confirm{
  0%{opacity:0;transform:translate3d(0,3px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}

/* Route changes settle into place instead of snapping. */
.main.sp-view-enter>*{
  animation:sp-view-settle var(--sp-motion-slow) var(--sp-motion-ease) both;
}

/* Shared controls: tactile, never bouncy. */
.btn,
.nav-btn,
.mobile-nav button,
.masthead-notifications,
.text-action,
.job-back,
.job-tool-tab,
.job-filter-btn{
  transition:
    transform var(--sp-motion-fast) var(--sp-motion-ease),
    background-color var(--sp-motion-base) ease,
    border-color var(--sp-motion-base) ease,
    color var(--sp-motion-base) ease,
    box-shadow var(--sp-motion-base) var(--sp-motion-ease),
    opacity var(--sp-motion-base) ease;
}
.btn .ui-icon,
.nav-btn .ui-icon,
.mobile-nav .ui-icon,
.masthead-notifications .ui-icon{
  transition:transform var(--sp-motion-base) var(--sp-motion-ease),color var(--sp-motion-base) ease,opacity var(--sp-motion-base) ease;
}
input,
select,
textarea{
  transition:
    border-color var(--sp-motion-base) ease,
    background-color var(--sp-motion-base) ease,
    box-shadow var(--sp-motion-base) var(--sp-motion-ease);
}

@media(hover:hover) and (pointer:fine){
  .btn:not(:disabled):hover{transform:translate3d(0,-1px,0)}
  .nav-btn:hover .ui-icon{transform:translate3d(1px,0,0)}
  .text-action:hover{transform:translate3d(1px,0,0)}
}
.btn:not(:disabled):active,
.masthead-notifications:active{transform:scale(.985)}
.mobile-nav button:active{transform:scale(.96)}
.nav-btn.active .ui-icon,
.mobile-nav button.active .ui-icon{transform:translate3d(0,-1px,0)}

/* Jobs list: new results arrive as a calm sequence. */
.route-jobs .job-list-card{
  animation:sp-row-settle 380ms var(--sp-motion-ease) both;
  transform-origin:center;
}
.route-jobs .job-list-card:nth-child(1){animation-delay:10ms}
.route-jobs .job-list-card:nth-child(2){animation-delay:35ms}
.route-jobs .job-list-card:nth-child(3){animation-delay:60ms}
.route-jobs .job-list-card:nth-child(4){animation-delay:85ms}
.route-jobs .job-list-card:nth-child(5){animation-delay:110ms}
.route-jobs .job-list-card:nth-child(6){animation-delay:135ms}
.route-jobs .job-list-card:nth-child(7){animation-delay:160ms}
.route-jobs .job-list-card:nth-child(8){animation-delay:185ms}
.route-jobs .job-list-card>button{
  transition:
    transform var(--sp-motion-base) var(--sp-motion-ease),
    background-color var(--sp-motion-base) ease,
    box-shadow var(--sp-motion-base) var(--sp-motion-ease);
}
.route-jobs .job-list-chevron,
.route-jobs .job-list-main strong,
.route-jobs .job-list-main small,
.route-jobs .job-list-context strong,
.route-jobs .job-list-context small{
  transition:
    transform var(--sp-motion-base) var(--sp-motion-ease),
    color var(--sp-motion-base) ease,
    opacity var(--sp-motion-base) ease;
}
.route-jobs .job-list-status:before{
  transition:transform var(--sp-motion-base) var(--sp-motion-ease),background-color var(--sp-motion-base) ease;
}
@media(hover:hover) and (pointer:fine){
  .route-jobs .job-list-card>button:hover{transform:translate3d(2px,0,0)}
  .route-jobs .job-list-card>button:hover .job-list-chevron{transform:translate3d(4px,0,0)}
  .route-jobs .job-list-card>button:hover .job-list-status:before{transform:scale(1.35)}
}
.route-jobs .job-list-card>button:active{transform:scale(.994)}

/* The gold filter line travels in, rather than switching on abruptly. */
.route-jobs .job-filter-btn{
  position:relative;
  border-bottom-color:transparent!important;
}
.route-jobs .job-filter-btn::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background:var(--jobs-gold,var(--brand-gold));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 280ms var(--sp-motion-ease);
}
.route-jobs .job-filter-btn.active::after{transform:scaleX(1)}
.route-jobs .job-search-field input:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-gold) 10%,transparent);
}

/* A few signature interactions on the premium Jobs surface. */
.route-jobs .jobs-new-plus{
  display:inline-block;
  transition:transform 300ms var(--sp-motion-ease);
}
@media(hover:hover) and (pointer:fine){
  .route-jobs .jobs-new-button:hover .jobs-new-plus{transform:rotate(90deg)}
}
.route-jobs .job-detail-top .actions .btn:hover{
  border-color:color-mix(in srgb,var(--brand-gold) 55%,var(--jobs-line));
}
.route-jobs .job-next-action,
.route-jobs .job-workspace .job-next-menu{
  transition:
    border-color var(--sp-motion-base) ease,
    background-color var(--sp-motion-base) ease,
    box-shadow var(--sp-motion-base) var(--sp-motion-ease),
    transform var(--sp-motion-base) var(--sp-motion-ease);
}
.route-jobs .job-next-marker{
  transition:transform 300ms var(--sp-motion-ease),color var(--sp-motion-base) ease;
}
@media(hover:hover) and (pointer:fine){
  .route-jobs .job-next-action:has(.job-next-button:hover) .job-next-marker{
    transform:translate3d(3px,-2px,0);
  }
}
.route-jobs .job-advanced>summary::after,
.route-jobs .job-tool-disclosure>summary::after{
  transition:transform 260ms var(--sp-motion-ease),color var(--sp-motion-base) ease;
}
.route-jobs .job-advanced[open]>summary::after,
.route-jobs .job-tool-disclosure[open]>summary::after{transform:rotate(180deg)}
.route-jobs .job-advanced[open] .job-tools{
  animation:sp-reveal 300ms var(--sp-motion-ease) both;
}
@media(hover:hover) and (pointer:fine){
  .route-jobs .job-tool-tab:hover{transform:translate3d(2px,0,0)}
}
.route-jobs .job-task-feedback:not([hidden]),
.route-jobs .job-next-error.success,
.route-jobs .job-create-status.success{
  animation:sp-confirm 280ms var(--sp-motion-ease) both;
}

/* Photos and media feel physical without zooming aggressively. */
.route-jobs img{
  transition:transform 360ms var(--sp-motion-ease),filter 360ms ease,opacity var(--sp-motion-base) ease;
}
@media(hover:hover) and (pointer:fine){
  .route-jobs a:hover img,
  .route-jobs button:hover img{transform:scale(1.018)}
}

/* Phone interactions stay quick and direct. */
@media(max-width:720px){
  .route-jobs .job-list-card{animation-duration:320ms}
  .route-jobs .job-list-card>button:active{
    transform:scale(.988);
    background:rgba(184,148,86,.065);
  }
  .route-jobs .jobs-new-button:active{transform:scale(.94)}
  .route-jobs .job-next-button:active{transform:scale(.985)}
}


/* The rest of the workspace shares the same calm movement language. */
.route-home .week-chip,
.route-home .job-card-link,
.route-home .attention-action,
.route-home .home-shortcut,
.route-diary .timeline-card,
.route-diary .diary-day-add,
.route-more .more-tool,
.route-enquiries .enquiry-card,
.route-catalogue .stove-card{
  transition:
    transform var(--sp-motion-base) var(--sp-motion-ease),
    background-color var(--sp-motion-base) ease,
    border-color var(--sp-motion-base) ease,
    box-shadow var(--sp-motion-base) var(--sp-motion-ease),
    color var(--sp-motion-base) ease;
}

@media(hover:hover) and (pointer:fine){
  .route-home .week-chip:hover:not(.today){transform:translate3d(0,-1px,0)}
  .route-home .home-shortcut:hover{transform:translate3d(2px,0,0)}
  .route-diary .timeline-card:hover{transform:translate3d(2px,0,0)}
  .route-more .more-tool:hover{transform:translate3d(2px,0,0)}
  .route-enquiries .enquiry-card:hover{transform:translate3d(2px,0,0)}
  .route-catalogue .stove-card:hover{transform:translate3d(0,-3px,0)}
}

.route-home .attention-row,
.route-diary .timeline-item,
.route-more .more-tool,
.route-enquiries .enquiry-card{
  animation:sp-row-settle 360ms var(--sp-motion-ease) both;
}
.route-home .attention-row:nth-child(2),
.route-diary .timeline-item:nth-child(2),
.route-more .more-tool:nth-child(2),
.route-enquiries .enquiry-card:nth-child(2){animation-delay:30ms}
.route-home .attention-row:nth-child(3),
.route-diary .timeline-item:nth-child(3),
.route-more .more-tool:nth-child(3),
.route-enquiries .enquiry-card:nth-child(3){animation-delay:55ms}
.route-home .attention-row:nth-child(4),
.route-diary .timeline-item:nth-child(4),
.route-more .more-tool:nth-child(4),
.route-enquiries .enquiry-card:nth-child(4){animation-delay:80ms}

.route-diary .timeline-detail[open] .progress-box,
.route-enquiries .enquiry-more-actions[open]>div,
.route-more .more-disclosure[open] .more-grid{
  animation:sp-reveal 280ms var(--sp-motion-ease) both;
}

@media(max-width:720px){
  .route-home .home-shortcut:active,
  .route-diary .timeline-card:active,
  .route-more .more-tool:active,
  .route-enquiries .enquiry-card:active,
  .route-catalogue .stove-card:active{transform:scale(.992)}
}


/* Supporting business surfaces use the same restrained response language. */
.route-invoices :is(.invoice-ready-card,.invoice-card),
.route-aftercare .aftercare-card,
.route-pricing :is(.pricing-group,.pricing-part),
.route-setup :is(.setup-choice,.theme-choice,.landing-choice),
.route-team .team-lane,
.route-notifications .notification-card,
.route-find-work :is(.find-work-toggle,.find-work-boundary>div),
.route-customer-doorway :is(.doorway-link-card,.doorway-qr-card),
.route-handover .handover-sheet{
  transition:
    transform var(--sp-motion-base) var(--sp-motion-ease),
    border-color var(--sp-motion-base) ease,
    background-color var(--sp-motion-base) ease,
    box-shadow var(--sp-motion-base) var(--sp-motion-ease);
}

.route-invoices :is(.invoice-ready-card,.invoice-card),
.route-aftercare .aftercare-card,
.route-notifications .notification-card,
.route-pricing .pricing-part{
  animation:sp-row-settle 340ms var(--sp-motion-ease) both;
}
.route-invoices :is(.invoice-ready-card,.invoice-card):nth-child(2),
.route-aftercare .aftercare-card:nth-child(2),
.route-notifications .notification-card:nth-child(2),
.route-pricing .pricing-part:nth-child(2){animation-delay:30ms}
.route-invoices :is(.invoice-ready-card,.invoice-card):nth-child(3),
.route-aftercare .aftercare-card:nth-child(3),
.route-notifications .notification-card:nth-child(3),
.route-pricing .pricing-part:nth-child(3){animation-delay:55ms}

@media(hover:hover) and (pointer:fine){
  .route-invoices .invoice-card:hover,
  .route-aftercare .aftercare-card:hover,
  .route-notifications .notification-card:hover,
  .route-pricing .pricing-part:hover{transform:translate3d(2px,0,0)}
  .route-setup .setup-choice:hover,
  .route-setup .theme-choice:hover,
  .route-find-work .find-work-toggle:hover{transform:translate3d(0,-1px,0)}
  .route-team .team-lane:hover{transform:translate3d(0,-1px,0)}
  .route-customer-doorway .doorway-link-card:hover,
  .route-customer-doorway .doorway-qr-card:hover{transform:translate3d(0,-1px,0)}
}

.route-invoices .invoice-card[open]>.invoice-card-head+.invoice-facts,
.route-aftercare .aftercare-edit[open] .aftercare-controls,
.route-aftercare .aftercare-service-record[open] .aftercare-service-record-body,
.route-setup details[open]>*:not(summary),
.route-handover [data-handover-advanced][open]>.handover-section{
  animation:sp-reveal 280ms var(--sp-motion-ease) both;
}

@media(max-width:720px){
  .route-invoices .invoice-card:active,
  .route-aftercare .aftercare-card:active,
  .route-notifications .notification-card:active,
  .route-setup .setup-choice:active,
  .route-find-work .find-work-toggle:active{transform:scale(.992)}
}

/* Respect the user's OS setting completely. */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-delay:0ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .main.sp-view-enter>*,
  .route-jobs .job-list-card,
  .route-jobs .job-advanced[open] .job-tools{
    opacity:1!important;
    transform:none!important;
  }
}