/* Compact order screen; action handlers and shared components stay in app.js. */
.compact-detail .back{margin-bottom:10px}
.compact-detail-next h2,.compact-detail-next h3{font-size:21px;letter-spacing:-.35px;line-height:1.3}
.compact-detail-next>.mt{margin-top:14px}
.compact-detail-next>.primary,.compact-detail-next>.secondary{margin-top:16px}
.compact-detail-next .compact-detail-skip{background:none;border:0;min-height:44px;margin-top:5px;font-size:14px;padding:10px;color:var(--muted)}
.compact-detail-description{margin-top:14px;white-space:pre-line;overflow-wrap:anywhere}
.compact-detail-customer{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.compact-detail-customer>div{min-width:0;overflow-wrap:anywhere}
.compact-detail-customer strong{font-size:15px}
.compact-detail-customer p{font-size:12px;margin-top:3px}
.compact-detail-followup{min-width:0}
.compact-detail-followup>.textbtn{margin-top:14px}
.compact-detail-progress{margin:0;padding:0;overflow:hidden}
.compact-detail-progress>summary{padding:20px;display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;min-height:84px}
.compact-detail-progress>summary::-webkit-details-marker{display:none}
.compact-detail-progress>summary>span:nth-child(2){display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.compact-detail-progress>summary strong{font-size:16px;font-weight:650}
.compact-detail-progress>summary .small{font-size:12px}
.compact-detail-step-number{display:flex;align-items:baseline;gap:3px;color:var(--green);font-size:23px;font-weight:650;white-space:nowrap}
.compact-detail-step-number small{font-size:12px;font-weight:500;color:var(--muted)}
.compact-detail-progress>summary>svg{width:18px;height:18px;transition:transform .15s}
.compact-detail-progress[open]>summary>svg{transform:rotate(180deg)}
.compact-detail-progress .timeline{padding:8px 23px 0;border-top:1px solid var(--line);margin:0 20px}
.compact-detail-progress .timeline>div:first-child{margin-top:18px}
.compact-detail-progress .timeline>div:last-child{padding-bottom:24px}
.compact-detail-result .order-result{margin:20px 0 0;display:flex;flex-direction:row;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:16px}
.compact-detail-result .order-result figcaption{flex:1;order:2;font-size:14px;color:var(--muted)}
.compact-detail-result .result-photo-button{width:90px;height:76px;flex:none;overflow:hidden;border-radius:12px}
.compact-detail-result .result-photo-button img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.large-text .compact-detail-next>.small,.large-text .compact-detail-description{font-size:18px;line-height:1.5}
.large-text .compact-detail-next h2,.large-text .compact-detail-next h3{font-size:24px}
.large-text .compact-detail-progress>summary .small,.large-text .compact-detail-customer p{font-size:16px}
.large-text .compact-detail-next .compact-detail-skip{font-size:18px}
@media(max-width:650px){
  .compact-detail .status{font-size:11px;padding:6px 9px}
  .compact-detail-next h2,.compact-detail-next h3{font-size:20px}
  .compact-detail-next>.mt{margin-top:10px}
  .compact-detail-next>.primary,.compact-detail-next>.secondary{margin-top:14px}
  .compact-detail-progress>summary{padding:17px 18px;min-height:79px}
  .compact-detail-description{font-size:15px;line-height:1.6;margin-top:12px}
  .compact-detail-progress .timeline{margin:0 18px;padding-left:8px;padding-right:0}
}
@media(prefers-reduced-motion:reduce){.compact-detail summary>svg{transition:none}}

.order-detail-view .main{padding-top:14px}
.order-detail-v2{max-width:860px;margin-inline:auto}
.order-detail-v2 .order-detail-v2-card{
  display:grid;gap:16px;min-width:0;margin:0;padding:clamp(15px,3vw,26px);
  border-radius:var(--ui-corner)
}
.order-detail-v2-heading{display:grid;gap:9px;min-width:0}
.order-detail-v2-title-row{
  display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px 14px;min-width:0
}
.order-detail-v2-title-copy{display:grid;gap:9px;flex:1 1 16rem;min-width:0}
.order-detail-v2 .detail-title{
  min-width:0;margin:0;font-size:clamp(24px,4vw,34px);line-height:1.16;
  letter-spacing:-.7px;overflow-wrap:anywhere
}
.order-detail-v2-budget-summary{
  display:grid;justify-items:end;gap:4px;max-width:100%;margin-inline-start:auto;text-align:right
}
.order-detail-v2-budget-line{
  display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 8px;min-width:0;max-width:100%
}
.order-detail-v2-budget-caption,.order-detail-v2-budget-hint{color:var(--muted);font-size:12px;line-height:1.35}
.order-detail-v2-budget{
  display:inline-block;max-width:100%;padding:7px 12px;border-radius:var(--ui-corner);
  background:var(--accent-soft);color:var(--accent);font-size:16px;font-weight:700;
  line-height:1.3;overflow-wrap:anywhere
}
/* Center the visible lettering while keeping the badge height. */
.order-detail-v2-budget-negotiable{padding-block:5px 9px;text-align:center}
.order-detail-v2-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px 10px;color:var(--muted);font-size:13px}
.order-detail-v2 .order-detail-v2-meta .status{
  display:inline-flex;align-items:center;gap:6px;padding:0;border:0;
  background:none;color:var(--accent);font-size:inherit;font-weight:650
}
.order-detail-v2 .order-detail-v2-meta .status.gray{color:var(--muted)}
.order-detail-v2-meta .status::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:currentColor}
.order-detail-v2-heading .order-edit-button{justify-self:start;margin:2px 0 0}

.order-detail-v2-map{
  position:relative;isolation:isolate;overflow:hidden;min-width:0;margin:0;
  border:1px solid var(--line);border-radius:var(--ui-corner);background:var(--soft)
}
.order-detail-v2-map-canvas{width:100%;height:clamp(146px,26vw,192px);background:var(--soft)}
.order-detail-v2-map-canvas.order-detail-v2-map-expanded{height:clamp(220px,50vh,420px);height:clamp(220px,50dvh,420px)}
.order-detail-v2-map-canvas .leaflet-control-attribution{
  max-width:100%;padding:1px 5px;background:var(--surface);color:var(--muted);line-height:1.35
}
.order-detail-v2-map-canvas .leaflet-control-attribution a{color:var(--accent)}
.order-detail-v2-map-label{
  position:absolute;z-index:500;left:8px;bottom:23px;max-width:calc(100% - 16px);
  padding:4px 8px;border:1px solid var(--line);border-radius:var(--ui-corner);
  background:var(--surface);color:var(--ink);font-size:12px;font-weight:650;line-height:1.35;
  pointer-events:none
}
.order-detail-v2 .order-detail-v2-expand{
  position:absolute;z-index:500;right:8px;top:8px;display:grid;place-items:center;
  width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--line);
  border-radius:var(--ui-corner);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-small)
}
.order-detail-v2-expand svg{width:18px;height:18px}
.order-detail-v2-map-empty{
  display:flex;align-items:center;gap:8px;min-height:52px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--ui-corner);background:var(--soft);color:var(--muted)
}
.order-detail-v2-map .order-detail-v2-map-empty{border:0;border-radius:0}
.order-detail-v2-map-empty[hidden],
.order-detail-v2-map[data-unavailable]>:is(.order-detail-v2-map-canvas,.order-detail-v2-map-label,.order-detail-v2-expand){display:none}
.order-detail-v2-map-empty svg{width:18px;height:18px;flex:none}

.order-detail-v2-facts{margin:0}
.order-detail-v2-facts>div{
  display:grid;grid-template-columns:minmax(64px,26%) minmax(0,1fr);align-items:start;gap:8px 14px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45;overflow-wrap:anywhere
}
.order-detail-v2-facts dt{color:var(--muted)}
.order-detail-v2-facts dd{margin:0;font-weight:630}
.order-detail-v2-facts dd :is(small,p,.small){display:block;margin:2px 0 0;font-weight:400}
.order-detail-v2-facts dd small{color:var(--muted);font-size:12px}
.order-detail-v2 .order-detail-v2-card>*{min-width:0}
.order-detail-v2-description{display:flex;align-items:flex-start;gap:12px 24px}
.order-detail-v2-description-copy{flex:1;min-width:0}
.order-detail-v2-attachments{min-width:0;max-width:100%}
.order-detail-v2-description :is(h2,h3),.order-detail-v2 .order-detail-v2-actions h3{font-size:17px;letter-spacing:-.35px}
.order-detail-v2-photo-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.order-detail-v2-photo{
  position:relative;display:block;width:84px;height:84px;overflow:hidden;
  border-radius:var(--ui-corner);cursor:zoom-in
}
.order-detail-v2-photo img{display:block;width:100%;height:100%;object-fit:cover}
.order-detail-v2-photo>span{
  position:absolute;right:5px;bottom:5px;display:grid;place-items:center;
  width:23px;height:23px;border-radius:50%;background:var(--surface-overlay);
  color:var(--accent);pointer-events:none;box-shadow:0 1px 4px #18212b20
}
.order-detail-v2-photo svg{width:15px;height:15px}
.order-detail-v2 .compact-detail-description{margin-top:6px;font-size:15px;line-height:1.5}
.order-detail-v2 .compact-detail-customer{padding-top:12px}
.order-detail-v2 .order-detail-v2-actions>.mt{margin-top:8px}
.order-detail-v2 .order-detail-v2-actions>.primary{min-height:48px}
.order-detail-v2 .order-detail-v2-actions>.primary:first-child{margin-top:0}
.order-detail-v2 .compact-detail-progress{border-radius:var(--ui-corner)}
.order-detail-v2 .compact-detail-progress>summary{min-height:66px;padding:12px 15px}

.large-text .order-detail-v2 .detail-title{font-size:clamp(29px,5vw,38px)}
.large-text :is(.order-detail-v2-budget-caption,.order-detail-v2-budget-hint){font-size:15px}
.large-text .order-detail-v2 :is(.order-detail-v2-budget,.compact-detail-description,.order-detail-v2-facts>div){font-size:18px}
.large-text .order-detail-v2 .order-detail-v2-meta{font-size:16px}
.large-text .order-detail-v2 .order-detail-v2-facts dd small{font-size:15px}
.large-text .order-detail-v2 :is(.order-detail-v2-description h2,.order-detail-v2-description h3,.order-detail-v2-actions h3){font-size:21px}

@media(min-width:651px){
  .order-detail-v2-budget-summary{padding-block-start:9px}
}
@media(max-width:650px){
  .order-detail-v2 .order-detail-v2-card{gap:12px}
  .order-detail-v2-title-row{gap:7px 9px}
  .order-detail-v2-budget{padding:6px 10px}
  .order-detail-v2-budget-negotiable{padding-block:4px 8px}
  .order-detail-v2-facts>div{gap:7px 10px}
  .order-detail-v2-description{flex-direction:column}
  .order-detail-v2-photo{width:68px;height:68px}
}