/* PhotoBridge v904R59 — authoritative photographer print/album order-card geometry.
   Rebuilds the actual customer-side .liveTimeline used by Print + Album,
   keeps text readable, and restores one predictable native mobile scroll surface. */

/* ---------- shared safety ---------- */
html body #root .photographerMain.photographerPrintWorkspace .ordersWorkspace.liveCustomerOrders,
html body #root .photographerMain.photographerPrintWorkspace .customerOrderGrid.liveOrderGrid,
html body #root .photographerMain.photographerPrintWorkspace .customerOrderCard.liveOrderCard,
html body #root .photographerMain.photographerPrintWorkspace .liveOrderMainRow,
html body #root .photographerMain.photographerPrintWorkspace .mobileOrderDisclosure,
html body #root .photographerMain.photographerPrintWorkspace .mobileOrderDisclosureBody,
html body #root .photographerMain.photographerPrintWorkspace .liveTimeline,
html body #root .photographerMain.photographerPrintWorkspace .customerOrderQuickRail,
html body #root .photographerMain.photographerPrintWorkspace .customerOrderQuickActions{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
}

html body #root .photographerMain.photographerPrintWorkspace .customerOrderGrid.liveOrderGrid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:10px!important;
  width:100%!important;
  overflow:visible!important;
}
html body #root .photographerMain.photographerPrintWorkspace .customerOrderCard.liveOrderCard{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
}

/* ---------- Windows / desktop ---------- */
@media (min-width:821px){
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderCard.liveOrderCard{
    padding:10px 12px!important;
    border-radius:14px!important;
  }

  /* Four clean zones: identity | facts | order progress | actions. */
  html body #root .photographerMain.photographerPrintWorkspace .liveOrderMainRow{
    display:grid!important;
    grid-template-columns:minmax(150px,.56fr) minmax(225px,.82fr) minmax(390px,1.62fr) max-content!important;
    grid-auto-rows:max-content!important;
    align-items:center!important;
    column-gap:12px!important;
    row-gap:8px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  html body #root .photographerMain.photographerPrintWorkspace .customerOrderHead{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    margin:0!important;
    padding:0!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderHead b{
    font-size:15px!important;
    line-height:1.25!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderHead small{
    font-size:8px!important;
    line-height:1.35!important;
  }

  html body #root .photographerMain.photographerPrintWorkspace .customerOrderFacts{
    grid-column:2!important;
    grid-row:1!important;
    align-self:stretch!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
    border:0!important;
    background:transparent!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderFacts>span{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    display:grid!important;
    place-content:center!important;
    justify-items:center!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    padding:2px 7px!important;
    border-inline-start:1px solid #eef1f5!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderFacts b{
    font-size:10px!important;
    line-height:1.15!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderFacts small{
    font-size:8px!important;
    line-height:1.15!important;
  }

  /* Disclosure wrapper is structural only on desktop. */
  html body #root .photographerMain.photographerPrintWorkspace .mobileOrderDisclosure,
  html body #root .photographerMain.photographerPrintWorkspace .mobileOrderDisclosureBody,
  html body #root .photographerMain.photographerPrintWorkspace .mobileOrderDisclosure.open>.mobileOrderDisclosureBody{
    display:contents!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .mobileOrderDisclosureToggle{
    display:none!important;
  }

  /* The actual order-status control used by both print (5) and album (6).
     Auto-flow gives every stage equal width without hard-coding the count. */
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline,
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline.albumCustomerTimeline{
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(0,1fr)!important;
    grid-template-columns:none!important;
    gap:4px!important;
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline>div,
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline.albumCustomerTimeline>div{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:14px minmax(0,1fr)!important;
    align-items:center!important;
    justify-items:start!important;
    gap:5px!important;
    width:auto!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    margin:0!important;
    padding:4px 6px!important;
    border:1px solid #e4e7ec!important;
    border-radius:9px!important;
    background:#fff!important;
    color:#667085!important;
    text-align:right!important;
    overflow:hidden!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline>div::before{
    display:none!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline .timelineDot{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:grid!important;
    place-items:center!important;
    justify-self:center!important;
    width:14px!important;
    height:14px!important;
    min-width:14px!important;
    min-height:14px!important;
    max-width:14px!important;
    max-height:14px!important;
    margin:0!important;
    padding:0!important;
    border-width:1.5px!important;
    font-size:7px!important;
    line-height:14px!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline b{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    font-size:9.4px!important;
    font-weight:850!important;
    line-height:1.2!important;
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    text-align:right!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline small{
    display:none!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline>div.done{
    background:#f8faff!important;
    border-color:#d8e2ff!important;
    color:#344054!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline>div.current{
    background:#eef4ff!important;
    border-color:#9eb7ed!important;
    color:#244ea2!important;
    box-shadow:inset 0 0 0 1px rgba(49,94,251,.05)!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline>div.current b{
    color:#244ea2!important;
  }

  /* Actions are compact and always stay at the end of the same row. */
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderQuickRail.compactOrderActionRail{
    grid-column:4!important;
    grid-row:1!important;
    align-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderQuickRail.compactOrderActionRail>span{
    display:none!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderQuickActions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderQuickActions>button{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:48px!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    margin:0!important;
    padding:0 9px!important;
    border-radius:8px!important;
    font-size:8.8px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  /* Date/delivery is already represented in the action rail data; do not spend a second row on it. */
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderFoot{
    display:none!important;
  }

  /* Secondary album/payment/correction information may expand below, never over the row. */
  html body #root .photographerMain.photographerPrintWorkspace .albumOrderSummary.compact,
  html body #root .photographerMain.photographerPrintWorkspace .liveOrderExtras,
  html body #root .photographerMain.photographerPrintWorkspace .prepayOrderCard,
  html body #root .photographerMain.photographerPrintWorkspace .prepayPaidConfirmation,
  html body #root .photographerMain.photographerPrintWorkspace .customerCourierCard,
  html body #root .photographerMain.photographerPrintWorkspace .customerFixNotice{
    grid-column:1/-1!important;
    grid-row:auto!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .albumOrderSummary.compact,
  html body #root .photographerMain.photographerPrintWorkspace .liveOrderExtras:not(:empty){
    margin-top:7px!important;
  }
}

/* ---------- mobile ---------- */
@media (max-width:820px){
  /* One native vertical scroll surface. No nested card/list scrollers and no smooth auto motion. */
  html body #root .photographerMain.photographerPrintWorkspace>.photographerRolePageScrollArea{
    position:relative!important;
    inset:auto!important;
    flex:1 1 0!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-gutter:auto!important;
    scroll-behavior:auto!important;
    scroll-snap-type:none!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .ordersWorkspace.liveCustomerOrders,
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderGrid.liveOrderGrid,
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderCard.liveOrderCard,
  html body #root .photographerMain.photographerPrintWorkspace .liveOrderMainRow,
  html body #root .photographerMain.photographerPrintWorkspace .mobileOrderDisclosure,
  html body #root .photographerMain.photographerPrintWorkspace .mobileOrderDisclosureBody,
  html body #root .photographerMain.photographerPrintWorkspace .liveOrderExtras{
    overflow-x:hidden!important;
    overscroll-behavior:initial!important;
    scroll-snap-type:none!important;
    touch-action:pan-y!important;
  }

  html body #root .photographerMain.photographerPrintWorkspace .customerOrderCard.liveOrderCard{
    padding:10px!important;
    border-radius:12px!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveOrderMainRow{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"head" "facts" "actions" "details"!important;
    gap:8px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderHead{
    grid-area:head!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    width:100%!important;
    margin:0!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderHead b{
    font-size:14px!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderFacts{
    grid-area:facts!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderFacts>span{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:grid!important;
    place-content:center!important;
    justify-items:center!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    padding:4px!important;
    border:1px solid #eef1f5!important;
    border-radius:9px!important;
    background:#fafbfc!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderFacts b{
    font-size:10px!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderFacts small{
    font-size:8px!important;
  }

  html body #root .photographerMain.photographerPrintWorkspace .customerOrderQuickRail.compactOrderActionRail{
    grid-area:actions!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:6px!important;
    width:100%!important;
    margin:0!important;
    padding:7px 0 0!important;
    border-top:1px solid #eef1f5!important;
    background:transparent!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderQuickRail.compactOrderActionRail>span{
    display:block!important;
    font-size:8px!important;
    color:#667085!important;
    text-align:right!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderQuickActions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    margin:0!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .customerOrderQuickActions>button{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin:0!important;
    padding:0 8px!important;
    border-radius:8px!important;
    font-size:9.5px!important;
  }

  html body #root .photographerMain.photographerPrintWorkspace .mobileOrderDisclosure{
    grid-area:details!important;
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .mobileOrderDisclosureToggle{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    width:100%!important;
    min-height:40px!important;
    height:auto!important;
    margin:0!important;
    padding:8px 10px!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .mobileOrderDisclosureBody{
    display:none!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:8px 0 0!important;
    overflow:visible!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .mobileOrderDisclosure.open>.mobileOrderDisclosureBody{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:max-content!important;
    gap:8px!important;
  }

  /* Readability first on phones: 2 columns instead of tiny 3-column labels. */
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline,
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline.albumCustomerTimeline{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-rows:44px!important;
    gap:5px!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline>div,
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline.albumCustomerTimeline>div{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:15px minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    padding:5px 7px!important;
    border:1px solid #e4e7ec!important;
    border-radius:9px!important;
    background:#fff!important;
    overflow:hidden!important;
    text-align:right!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline>div::before{
    display:none!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline .timelineDot{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:grid!important;
    place-items:center!important;
    width:15px!important;
    height:15px!important;
    min-width:15px!important;
    min-height:15px!important;
    margin:0!important;
    font-size:7px!important;
    line-height:15px!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline b{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    font-size:9.5px!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow:hidden!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    text-align:right!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline small{
    display:none!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline>div.done{
    background:#f8faff!important;
    border-color:#d8e2ff!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .liveTimeline>div.current{
    background:#eef4ff!important;
    border-color:#9eb7ed!important;
  }

  html body #root .photographerMain.photographerPrintWorkspace .customerOrderFoot{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:wrap!important;
    gap:5px 8px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:8px!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .albumOrderSummary.compact,
  html body #root .photographerMain.photographerPrintWorkspace .liveOrderExtras,
  html body #root .photographerMain.photographerPrintWorkspace .prepayOrderCard,
  html body #root .photographerMain.photographerPrintWorkspace .prepayPaidConfirmation,
  html body #root .photographerMain.photographerPrintWorkspace .customerCourierCard,
  html body #root .photographerMain.photographerPrintWorkspace .customerFixNotice{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
}