/* RC40: RELAY 0.9.2 hero and operational-control adapter.
 * The shared workspace bundle remains unchanged. */
.lsp-beta-app[data-lsp-beta-view] {
    --lsp-page-hero-height:calc((100svh - var(--lsp-beta-frame-inset) * 2) * .85);
    --lsp-page-hero-padding:clamp(20px,3.5vw,52px);
    --lsp-header-shade-strong:44%;
    --lsp-header-shade-soft:18%;
}
.lsp-beta-app[data-lsp-beta-view][data-theme="light"] {
    --lsp-header-shade-strong:18%;
    --lsp-header-shade-soft:6%;
}
.lsp-beta-app[data-lsp-beta-view][data-theme="light"][data-hero-ink="light"] {
    --lsp-header-shade-strong:44%;
    --lsp-header-shade-soft:18%;
}
.lsp-beta-app[data-lsp-beta-view] .lsp-beta-stage:has(> .lsp-page-hero) {
    top:var(--lsp-beta-frame-inset);
    padding-top:0;
}
.lsp-beta-app[data-lsp-beta-view] .lsp-beta-stage > .lsp-page-hero {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    min-height:var(--lsp-page-hero-height);
    min-width:0;
    width:100%;
    gap:0;
    padding:calc(90px + var(--lsp-beta-safe-top)) var(--lsp-page-hero-padding) clamp(30px,4svh,48px);
    margin-bottom:18px;
    border:0;
    border-radius:clamp(22px,2.5vw,32px);
    background:radial-gradient(ellipse 90% 130% at left bottom,rgb(3 7 6 / var(--lsp-header-shade-strong)) 0%,rgb(3 7 6 / var(--lsp-header-shade-soft)) 38%,transparent 72%) !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:visible;
}
.lsp-beta-app[data-lsp-beta-view] .lsp-beta-stage > .lsp-page-hero::before { content:none; }
.lsp-beta-app[data-lsp-beta-view] .lsp-page-hero .lsp-beta-breadcrumbs { position:static; flex-wrap:wrap; margin:0 0 18px; padding:0; }
.lsp-beta-app[data-lsp-beta-view] .lsp-page-hero h1 {
    max-width:22ch;
    font-size:clamp(38px,4.5vw,64px) !important;
    line-height:1.06 !important;
    overflow-wrap:anywhere;
}
.lsp-beta-app[data-lsp-beta-view] .lsp-page-hero :is(h1,p,.lsp-beta-breadcrumbs) { text-shadow:none !important; }
.lsp-beta-app[data-lsp-beta-view] .lsp-page-hero .lsp-beta-stage-intro { text-transform:none; letter-spacing:normal; }
.lsp-beta-app[data-lsp-beta-view][data-theme="light"][data-hero-ink="light"] .lsp-page-hero :is(h1,p,.lsp-beta-breadcrumbs) { color:#fff !important; }
.lsp-beta-app[data-lsp-beta-view][data-theme="light"][data-hero-ink="dark"] .lsp-page-hero :is(h1,p,.lsp-beta-breadcrumbs) { color:#17201c !important; }
@media(max-width:760px) {
    .lsp-beta-app[data-lsp-beta-view] .lsp-beta-stage > .lsp-page-hero { padding-top:calc(80px + var(--lsp-beta-safe-top)); padding-bottom:28px; }
}

/* Controls share the same geometry in the app and its existing modal portal. */
.lsp-beta-app[data-lsp-beta-view],body.lsp-beta-active > .lsp-modal-overlay {
    --lsp-control-edge:rgb(255 255 255 / 24%);
    --lsp-control-bg:rgb(255 255 255 / 11%);
    --lsp-control-hover:rgb(255 255 255 / 16%);
    --lsp-control-selected:rgb(255 255 255 / 18%);
    --lsp-control-selected-edge:rgb(255 255 255 / 42%);
    --lsp-control-ink:var(--lsp-beta-ink);
    --lsp-control-highlight:rgb(255 255 255 / 7%);
    --lsp-control-primary:rgb(60 145 109 / 32%);
    --lsp-control-primary-edge:rgb(92 184 143 / 65%);
}
.lsp-beta-app[data-lsp-beta-view][data-theme="light"],body.lsp-beta-active[data-lsp-beta-theme="light"] > .lsp-modal-overlay {
    --lsp-control-edge:rgb(23 27 25 / 28%);
    --lsp-control-bg:rgb(255 255 255 / 82%);
    --lsp-control-hover:rgb(23 27 25 / 7%);
    --lsp-control-selected:rgb(38 88 78 / 13%);
    --lsp-control-selected-edge:rgb(38 88 78 / 55%);
    --lsp-control-highlight:rgb(255 255 255 / 48%);
    --lsp-control-primary:#cee5d9;
    --lsp-control-primary-edge:rgb(38 88 78 / 48%);
}
.lsp-beta-app[data-lsp-beta-view] .lsp-card.has-bg {
    --lsp-control-edge:rgb(255 255 255 / 28%);
    --lsp-control-bg:rgb(255 255 255 / 11%);
    --lsp-control-hover:rgb(255 255 255 / 16%);
    --lsp-control-ink:#fff;
    --lsp-control-primary:rgb(60 145 109 / 32%);
    --lsp-control-primary-edge:rgb(92 184 143 / 65%);
}
:is(.lsp-beta-app[data-lsp-beta-view],body.lsp-beta-active > .lsp-modal-overlay) :is(.lsp-button,.lsp-button-primary,.lsp-order-mgmt-btn,.lsp-tab-btn) {
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px !important;
    margin-block:0;
    padding-block:10px !important;
    line-height:20px !important;
    vertical-align:middle;
    text-shadow:none !important;
    box-shadow:inset 0 1px 0 var(--lsp-control-highlight) !important;
}
:is(.lsp-beta-app[data-lsp-beta-view],body.lsp-beta-active > .lsp-modal-overlay) :is(.lsp-button,.lsp-button-primary,.lsp-order-mgmt-btn) > :is(span,strong) { text-shadow:none !important; }
:is(.lsp-beta-app[data-lsp-beta-view],body.lsp-beta-active > .lsp-modal-overlay) .lsp-button:not(.lsp-button-primary):not(.lsp-order-mgmt-btn):not(.lsp-button-danger):not(.lsp-attention-pill):not(.lsp-delete-order-data-btn):not(.lsp-workflow-tab):not([role="tab"]):not([data-lsp-beta-theme]) {
    border-color:var(--lsp-control-edge) !important;
    background:var(--lsp-control-bg) !important;
    color:var(--lsp-control-ink) !important;
}
:is(.lsp-beta-app[data-lsp-beta-view],body.lsp-beta-active > .lsp-modal-overlay) .lsp-button:not(.lsp-button-primary):not(.lsp-order-mgmt-btn):not(.lsp-button-danger):not(.lsp-attention-pill):not(.lsp-delete-order-data-btn):not(.lsp-workflow-tab):not([role="tab"]):not([data-lsp-beta-theme]):hover:not(:disabled) {
    border-color:var(--lsp-control-selected-edge) !important;
    background:var(--lsp-control-hover) !important;
}
:is(.lsp-beta-app[data-lsp-beta-view],body.lsp-beta-active > .lsp-modal-overlay) :is(.lsp-button-primary,.lsp-order-mgmt-btn) {
    border-color:var(--lsp-control-primary-edge) !important;
    background:var(--lsp-control-primary) !important;
    color:var(--lsp-control-ink) !important;
}
.lsp-beta-app[data-lsp-beta-view] :is(.lsp-tabs-nav .lsp-tab-btn,.lsp-workflow-tabs .lsp-workflow-tab),
body.lsp-beta-active #lsp-order-mgmt-modal .lsp-om-tabs [role="tab"] {
    border:1px solid transparent !important;
    background:transparent !important;
    color:var(--lsp-beta-muted) !important;
    box-shadow:none !important;
}
.lsp-beta-app[data-lsp-beta-view] :is(.lsp-tabs-nav .lsp-tab-btn.active,.lsp-workflow-tabs .lsp-workflow-tab.is-active),
body.lsp-beta-active #lsp-order-mgmt-modal .lsp-om-tabs [aria-selected="true"] {
    border-color:var(--lsp-control-selected-edge) !important;
    background:var(--lsp-control-selected) !important;
    color:var(--lsp-control-ink) !important;
    box-shadow:inset 0 0 0 1px var(--lsp-control-selected-edge) !important;
}
.lsp-beta-app[data-lsp-beta-view] :is(.lsp-tabs-nav .lsp-tab-btn,.lsp-workflow-tabs .lsp-workflow-tab):hover:not(.active):not(.is-active) { color:var(--lsp-control-ink) !important; border-color:var(--lsp-control-edge) !important; }
:is(.lsp-beta-app[data-lsp-beta-view] .lsp-beta-workspace-panel,body.lsp-beta-active > .lsp-modal-overlay) :is(input:not([type]),input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="search"],input[type="url"],input[type="date"],input[type="datetime-local"],select) {
    box-sizing:border-box;
    min-height:44px !important;
    height:44px;
    margin-block:0;
    padding:10px 12px !important;
    border-color:var(--lsp-control-edge) !important;
    line-height:20px !important;
    vertical-align:middle;
    text-shadow:none !important;
}
:is(.lsp-beta-app[data-lsp-beta-view] .lsp-beta-workspace-panel,body.lsp-beta-active > .lsp-modal-overlay) select { padding-right:30px !important; }
.lsp-beta-app[data-lsp-beta-view] :is(.lsp-actions,.lsp-admin-card-actions-section,.lsp-workflow-selection,.lsp-workflow-pagination,.lsp-picking-actions) { align-items:center; }
.lsp-beta-app[data-lsp-beta-view] .lsp-tabs-nav { box-shadow:none; }
:is(.lsp-beta-app[data-lsp-beta-view],body.lsp-beta-active > .lsp-modal-overlay) :is(.lsp-button,.lsp-button-primary,.lsp-order-mgmt-btn):hover { transform:none !important; }
:is(.lsp-beta-app[data-lsp-beta-view],body.lsp-beta-active > .lsp-modal-overlay) :is(.lsp-button,.lsp-button-primary,.lsp-order-mgmt-btn):focus-visible { outline:2px solid var(--lsp-control-selected-edge) !important; outline-offset:3px; }

/* The image-card title class also appears in the light order-editor header. */
body.lsp-beta-active[data-lsp-beta-theme="light"] > #lsp-order-mgmt-modal #lsp-om-project-name { color:var(--lsp-beta-ink) !important; }

/* Drawer-style segmented navigation: one outer track, one selected pill. */
.lsp-beta-app[data-lsp-beta-view] .lsp-segmented-tabs {
    display: inline-flex; align-items: stretch; flex-wrap: nowrap;
    width: fit-content; max-width: 100%; box-sizing: border-box;
    gap: 4px; padding: 4px !important; margin: 0 0 18px;
    border: 1px solid var(--lsp-beta-line) !important; border-radius: 999px;
    background: var(--lsp-beta-field) !important; box-shadow: none !important;
}
.lsp-beta-app[data-lsp-beta-view] .lsp-segmented-tabs > .lsp-segmented-tab {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 1 1 auto; gap: 8px; min-width: 0; min-height: 44px; box-sizing: border-box;
    margin: 0 !important; padding: 10px 20px !important;
    border: 0 !important; border-radius: 999px !important;
    background: transparent !important; box-shadow: none !important;
    color: var(--formplus-muted) !important; text-decoration: none !important;
    font: 500 13px/1.35 var(--formplus-font, Montserrat, sans-serif) !important;
    letter-spacing: 0 !important; text-transform: none !important;
    white-space: normal; text-align: center; cursor: pointer;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.lsp-beta-app[data-lsp-beta-view] .lsp-segmented-tabs > .lsp-segmented-tab:is([aria-selected="true"],[aria-current]) {
    background: var(--formplus-selected) !important; color: var(--formplus-ink) !important;
    box-shadow: inset 0 0 0 1px var(--formplus-line) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}
.lsp-beta-app[data-lsp-beta-view] .lsp-segmented-tabs > .lsp-segmented-tab:hover:not([aria-selected="true"]):not([aria-current]) {
    background: transparent !important; box-shadow: none !important;
    color: var(--formplus-ink) !important;
}
.lsp-beta-app[data-lsp-beta-view] .lsp-segmented-tabs > .lsp-segmented-tab:focus-visible {
    outline: 2px solid var(--lsp-control-selected-edge) !important; outline-offset: 2px;
}
@media (max-width: 680px) {
    .lsp-beta-app[data-lsp-beta-view] .lsp-segmented-tabs > .lsp-segmented-tab { padding: 8px 12px !important; }
    .lsp-beta-app[data-lsp-beta-view] .lsp-settings-area-tabs { display: flex; overflow-x: auto; }
    .lsp-beta-app[data-lsp-beta-view] .lsp-settings-area-tabs > .lsp-segmented-tab { flex: 0 0 auto; }
    .lsp-beta-app[data-lsp-beta-view] .lsp-shipment-tabs:has(> .lsp-segmented-tab:nth-child(3)) { overflow-x: auto; }
    .lsp-beta-app[data-lsp-beta-view] .lsp-shipment-tabs:has(> .lsp-segmented-tab:nth-child(3)) > .lsp-segmented-tab { flex: 0 0 auto; }
}

/* Shared bundles also style tabs as action buttons in this important layer.
 * Keep every segmented navigation group independent of that button paint. */
@layer formplus-workspace-actions {
    .lsp-beta-app[data-lsp-beta-view] .lsp-segmented-tabs > .lsp-segmented-tab {
        border: 0 !important;
        background: transparent !important;
        color: var(--formplus-muted) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .lsp-beta-app[data-lsp-beta-view] .lsp-segmented-tabs > .lsp-segmented-tab:is([aria-selected="true"],[aria-current]) {
        background: var(--formplus-selected) !important;
        color: var(--formplus-ink) !important;
        box-shadow: inset 0 0 0 1px var(--formplus-line) !important;
        backdrop-filter: blur(18px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    }
    .lsp-beta-app[data-lsp-beta-view] .lsp-segmented-tabs > .lsp-segmented-tab:hover:not([aria-selected="true"]):not([aria-current]) {
        background: transparent !important;
        color: var(--formplus-ink) !important;
        box-shadow: none !important;
    }
}