/* Premium opened-job drawer
   Deep records should feel like a deliberate workspace, not a hidden admin screen. */

.route-jobs .job-advanced{
  margin-top:18px;
}
.route-jobs .job-advanced>summary{
  position:relative;
  min-height:54px;
  padding:15px 30px 15px 0;
  border:0;
  border-top:1px solid var(--jobs-line);
  border-radius:0;
  background:transparent;
  color:#5f655f;
}
.route-jobs .job-advanced>summary strong{
  font-family:var(--sp-serif,Georgia,"Times New Roman",serif);
  font-size:.96rem;
  font-weight:500;
  letter-spacing:-.01em;
}
.route-jobs .job-advanced>summary::after{
  content:"+";
  position:absolute;
  right:2px;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  color:#9a8258;
  font-size:1rem;
  font-weight:500;
  transition:
    transform 260ms var(--sp-motion-ease,ease),
    color 220ms ease;
}
.route-jobs .job-advanced[open]>summary{
  margin-bottom:0;
  border-radius:0;
  color:var(--ink);
}
.route-jobs .job-advanced[open]>summary::after{
  content:"+";
  transform:translateY(-50%) rotate(45deg);
  color:#80683d;
}
.route-jobs .job-advanced>summary:hover{
  color:var(--ink);
}
.route-jobs .job-advanced>summary:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand-gold) 62%,transparent);
  outline-offset:3px;
}

/* Desktop drawer */
.route-jobs .job-tools{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  border:1px solid var(--jobs-line);
  border-radius:8px;
  background:var(--sp-premium-paper,var(--card));
  overflow:hidden;
  box-shadow:0 12px 34px rgba(20,21,21,.035);
}
.route-jobs .job-tool-nav{
  display:grid;
  align-content:start;
  gap:3px;
  padding:10px 8px;
  border-right:1px solid var(--jobs-line);
  background:color-mix(in srgb,var(--sp-premium-soft,var(--surface)) 55%,transparent);
}
.route-jobs .job-tool-tab{
  position:relative;
  min-height:58px;
  padding:10px 12px 10px 14px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#747a75;
  text-align:left;
  cursor:pointer;
  transition:
    transform var(--sp-motion-fast,150ms) var(--sp-motion-ease,ease),
    background-color 220ms ease,
    color 220ms ease;
}
.route-jobs .job-tool-tab::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  bottom:11px;
  width:2px;
  border-radius:999px;
  background:var(--brand-gold);
  transform:scaleY(0);
  transform-origin:center;
  transition:transform 240ms var(--sp-motion-ease,ease);
}
.route-jobs .job-tool-tab strong{
  display:block;
  color:inherit;
  font-family:var(--sp-serif,Georgia,"Times New Roman",serif);
  font-size:.9rem;
  font-weight:500;
  line-height:1.35;
}
.route-jobs .job-tool-tab span{
  display:block;
  margin-top:3px;
  color:#90958f;
  font-size:.7rem;
  line-height:1.35;
}
.route-jobs .job-tool-tab:hover{
  background:color-mix(in srgb,var(--brand-gold) 5%,transparent);
  color:var(--ink);
}
.route-jobs .job-tool-tab[aria-selected="true"]{
  background:color-mix(in srgb,var(--brand-gold) 7%,transparent);
  color:var(--ink);
}
.route-jobs .job-tool-tab[aria-selected="true"]::before{
  transform:scaleY(1);
}
.route-jobs .job-tool-tab[aria-selected="true"] span{
  color:#80683d;
}
.route-jobs .job-tool-tab:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand-gold) 62%,transparent);
  outline-offset:-2px;
}
.route-jobs .job-tool-workspace{
  min-width:0;
  background:var(--sp-premium-paper,var(--card));
}
.route-jobs .job-tool-panel{
  min-width:0;
}
.route-jobs .job-tool-panel:not([hidden]){
  animation:sp-job-tool-in 260ms var(--sp-motion-ease,ease) both;
}
.route-jobs .job-tool-panel:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand-gold) 45%,transparent);
  outline-offset:-3px;
}
.route-jobs .job-tool-panel>.job-panel{
  padding:24px 26px;
}
.route-jobs .job-tool-disclosure>summary:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand-gold) 55%,transparent);
  outline-offset:2px;
}
.route-jobs .job-tool-disclosure>summary:hover{
  color:var(--ink);
}
.route-jobs .job-tool-disclosure>summary::after{
  color:#9a8258;
}

/* Deep controls should respond immediately without turning green. */
.route-jobs .job-tools :is(button,a).text-action:hover,
.route-jobs .job-tools .job-inline-actions .btn:hover{
  color:#80683d;
}
.route-jobs .job-tools input:focus,
.route-jobs .job-tools select:focus,
.route-jobs .job-tools textarea:focus{
  outline:0;
  border-color:var(--brand-gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-gold) 10%,transparent);
}

@keyframes sp-job-tool-in{
  from{opacity:0;transform:translate3d(4px,0,0)}
  to{opacity:1;transform:none}
}

/* Phone: one swipeable row of sections, not a 2x2 admin grid. */
@media(max-width:720px){
  .route-jobs .job-advanced{
    margin-top:14px;
  }
  .route-jobs .job-advanced>summary{
    min-height:52px;
    padding-block:14px;
  }
  .route-jobs .job-tools{
    display:block;
    border:0;
    border-top:1px solid var(--jobs-line);
    border-radius:0;
    box-shadow:none;
    overflow:visible;
    background:transparent;
  }
  .route-jobs .job-tool-nav{
    display:flex;
    grid-template-columns:none;
    gap:4px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:9px 0 8px;
    border:0;
    border-bottom:1px solid var(--jobs-line);
    background:var(--sp-premium-paper,var(--card));
  }
  .route-jobs .job-tool-nav::-webkit-scrollbar{display:none}
  .route-jobs .job-tool-tab{
    flex:0 0 auto;
    scroll-snap-align:start;
    min-height:46px;
    padding:10px 12px;
    border-radius:6px;
    text-align:left;
    white-space:nowrap;
  }
  .route-jobs .job-tool-tab::before{
    left:10px;
    right:10px;
    top:auto;
    bottom:1px;
    width:auto;
    height:2px;
    transform:scaleX(0);
    transform-origin:left center;
  }
  .route-jobs .job-tool-tab[aria-selected="true"]::before{
    transform:scaleX(1);
  }
  .route-jobs .job-tool-tab span{display:none}
  .route-jobs .job-tool-tab strong{font-size:.84rem}
  .route-jobs .job-tool-workspace{
    background:transparent;
  }
  .route-jobs .job-tool-panel>.job-panel{
    padding:20px 0 4px;
  }
}

/* Reduced-motion inherits the global gate, but keep the visible panel stable explicitly. */
@media(prefers-reduced-motion:reduce){
  .route-jobs .job-tool-panel:not([hidden]){
    animation:none!important;
  }
}


/* Interaction accent: gold means "touch this"; green remains reserved for real success/status. */
.route-jobs .job-search-filters>summary:focus-visible,
.route-jobs .job-search-archive>summary:focus-visible,
.route-jobs .job-list-card>button:focus-visible,
.route-jobs [data-evidence-records]>summary:focus-visible,
.route-jobs .job-visit-note>summary:focus-visible,
.route-jobs .job-booking-note>summary:focus-visible,
.route-jobs .job-booking-length>summary:focus-visible,
.route-jobs .booking-day-more>summary:focus-visible{
  outline-color:color-mix(in srgb,var(--brand-gold) 70%,transparent);
}

.route-jobs .job-list-action,
.route-jobs .job-contact a,
.route-jobs .installation-plan-action,
.route-jobs .job-work-scope>summary>span:last-child,
.route-jobs .job-survey-action,
.route-jobs .job-booking-note>summary,
.route-jobs .job-booking-length>summary small,
.route-jobs .booking-day-more>summary{
  color:#80683d;
}

.route-jobs .job-choice-tools .btn:hover,
.route-jobs .job-workspace .job-next-directed .job-choice-tools .btn:hover{
  color:#80683d;
  text-decoration-color:color-mix(in srgb,var(--brand-gold) 65%,transparent);
}

.route-jobs .job-work-choices label:has(input:checked){
  border-color:var(--brand-gold);
  background:color-mix(in srgb,var(--brand-gold) 7%,var(--card));
}
.route-jobs .job-work-choices input{
  accent-color:var(--brand-gold);
}

/* Quiet-looking utilities still get proper physical hit areas. */
.route-jobs .job-detail-top .job-back{
  min-height:44px;
}
.route-jobs .job-detail-top .actions .btn,
.route-jobs .job-detail-top .actions .btn.primary{
  min-height:44px;
}
@media(max-width:720px){
  .route-jobs .job-detail-top .job-back{
    min-height:44px;
  }
  .route-jobs .job-detail-top .actions .btn,
  .route-jobs .job-detail-top .actions .btn.primary{
    min-height:44px;
    padding-block:8px;
  }
}