:root {
  --workflow-mobile-handle-touch-width: 44px;
  --workflow-mobile-handle-visible-width: 7px;
  --workflow-mobile-handle-height: 108px;
  --workflow-mobile-drawer-width: 172px;
  --workflow-mobile-drawer-height: 300px;
  --workflow-mobile-item-height: 48px;
  --workflow-mobile-morph-duration: 240ms;
  --workflow-mobile-morph-easing: cubic-bezier(.22, .78, .18, 1);
  --workflow-safe-left: env(safe-area-inset-left, 0px);
  --workflow-safe-right: env(safe-area-inset-right, 0px);
}

.mobile-workflow-wheel { display: none; }

@media (max-width: 900px), (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  body:not(.bms-opendesign-v8) #workflowStrip { display: none; }
  body:not(.bms-opendesign-v8) .mobile-workflow-wheel:not([hidden]) { display: block; }
  .mobile-workflow-wheel::after {
    content: ""; position: fixed; z-index: 2147482000;
    top: calc(50dvh - 50px); width: 3px; height: 100px;
    border-radius: 999px; pointer-events: none; opacity: var(--workflow-redock-target-opacity, 0);
    background: color-mix(in srgb, var(--brand) 76%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 28%, transparent);
    transition: opacity 70ms linear;
  }
  .mobile-workflow-wheel[data-redock-destination="right"]::after { right: var(--workflow-safe-right); }
  .mobile-workflow-wheel[data-redock-destination="left"]::after { left: var(--workflow-safe-left); }
  .mobile-workflow-backdrop {
    position: fixed; z-index: 2147481998; inset: 0; border: 0;
    background: color-mix(in srgb, var(--bms-frame-950) 38%, transparent); opacity: 0; pointer-events: none;
    backdrop-filter: blur(7px) saturate(.78);
    -webkit-backdrop-filter: blur(7px) saturate(.78);
    transition: opacity var(--workflow-mobile-morph-duration);
    touch-action: pan-x pan-y;
  }
  .mobile-workflow-membrane {
    position: fixed; z-index: 2147481999; inset: 0;
    width: 100vw; height: 100dvh; overflow: visible;
    opacity: 0; pointer-events: none;
    transition: opacity 140ms ease;
    contain: strict;
  }
  .mobile-workflow-membrane-sheet {
    fill: color-mix(in srgb, var(--surface) 38%, transparent);
    stroke: color-mix(in srgb, white 8%, var(--line));
    stroke-width: .35;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--bms-frame-950) 10%, transparent));
    will-change: d, opacity;
  }
  .mobile-workflow-membrane-feather {
    fill: none;
    stroke: color-mix(in srgb, var(--surface) 46%, transparent);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: blur(4px);
    will-change: d, opacity;
  }
  .mobile-workflow-membrane-capture {
    fill: color-mix(in srgb, var(--surface) 34%, transparent);
    stroke: color-mix(in srgb, white 14%, var(--line));
  }
  body.mobile-workflow-wheel-open { overflow: hidden; }
  .mobile-workflow-control {
    position: fixed; z-index: 2147482001;
    left: var(--workflow-safe-left);
    top: calc(50dvh - var(--workflow-mobile-handle-height) / 2);
    width: var(--workflow-mobile-handle-touch-width);
    height: var(--workflow-mobile-handle-height);
    overflow: visible;
    opacity: var(--workflow-redock-opacity, 1);
    transform: translate3d(var(--workflow-redock-x, 0px), 0, 0) scale(var(--workflow-redock-scale, 1), var(--workflow-redock-scale-y, 1));
    transform-origin: left center;
    will-change: width, height, top, transform, opacity;
    transition: width var(--workflow-mobile-morph-duration) var(--workflow-mobile-morph-easing),
      height var(--workflow-mobile-morph-duration) var(--workflow-mobile-morph-easing),
      top var(--workflow-mobile-morph-duration) var(--workflow-mobile-morph-easing),
      box-shadow 140ms ease, border-radius 140ms ease;
  }
  .mobile-workflow-wheel[data-dock-side="right"] .mobile-workflow-control {
    right: var(--workflow-safe-right); left: auto; transform-origin: right center;
  }
  .mobile-workflow-wheel[data-membrane-owner="left"] .mobile-workflow-control { transform-origin: left center; }
  .mobile-workflow-wheel[data-membrane-owner="right"] .mobile-workflow-control { transform-origin: right center; }
  .mobile-workflow-wheel[data-redocking="true"] .mobile-workflow-control {
    box-shadow: none;
    will-change: transform, opacity, box-shadow;
  }
  .mobile-workflow-wheel[data-redocking="true"][data-dock-side="right"] .mobile-workflow-control {
    box-shadow: none;
  }
  .mobile-workflow-handle {
    position: absolute; z-index: 4; left: 0; top: 18px;
    width: var(--workflow-mobile-handle-visible-width); height: 72px;
    border-radius: 999px; background: var(--brand);
    transition: inset var(--workflow-mobile-morph-duration), width var(--workflow-mobile-morph-duration), height var(--workflow-mobile-morph-duration);
  }
  .mobile-workflow-handle-trigger {
    position: absolute; z-index: 5; inset: 0 auto 0 0;
    width: var(--workflow-mobile-handle-touch-width); height: 100%;
    border: 0; padding: 0; background: transparent;
  }
  .mobile-workflow-wheel[data-dock-side="right"] .mobile-workflow-handle {
    right: 0; left: auto;
  }
  .mobile-workflow-wheel[data-dock-side="right"] .mobile-workflow-handle-trigger {
    right: 0; left: auto;
  }
  .mobile-workflow-handle-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; border-radius: 8px; }
  .mobile-workflow-picker {
    position: absolute; z-index: 2; inset: 0; overflow: hidden;
    opacity: 0; touch-action: none; user-select: none;
    perspective: 520px; transform-style: preserve-3d;
    transition: opacity 110ms ease 35ms;
  }
  .mobile-workflow-picker:focus { outline: none; }
  .mobile-workflow-item {
    position: absolute; left: 0; top: 50%;
    display: flex; align-items: center; gap: 7px;
    width: var(--workflow-card-width, 112px); min-width: 72px; height: var(--workflow-mobile-item-height);
    padding: 0 9px; border: 0; background: transparent;
    color: var(--muted); font-size: 13px; font-weight: 760; white-space: nowrap;
    transform-origin: left center; will-change: transform, opacity;
    backface-visibility: hidden;
  }
  .mobile-workflow-wheel[data-dock-side="right"] .mobile-workflow-item {
    right: 0; left: auto; flex-direction: row-reverse; transform-origin: right center;
  }
  .mobile-workflow-item-glass {
    position: absolute; z-index: 0; inset: 4px 0;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); border-left: 0;
    border-radius: 0 7px 7px 0;
    background: color-mix(in srgb, var(--surface) var(--workflow-item-glass-mix, 68%), transparent);
    box-shadow: 6px 7px 20px color-mix(in srgb, var(--bms-frame-950) 24%, transparent),
      inset 0 1px color-mix(in srgb, white 42%, transparent);
    opacity: var(--workflow-item-glass-opacity, .52);
    transform: scaleX(var(--workflow-item-glass-scale, .92));
    transform-origin: left center;
    backdrop-filter: blur(16px) saturate(.92);
    -webkit-backdrop-filter: blur(16px) saturate(.92);
    will-change: transform, opacity, box-shadow;
    pointer-events: none;
  }
  .mobile-workflow-wheel[data-dock-side="right"] .mobile-workflow-item-glass {
    right: 0; left: auto; border-right: 0; border-left: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 7px 0 0 7px; transform-origin: right center;
  }
  .mobile-workflow-item-number {
    position: relative; z-index: 1; display: grid; place-items: center;
    flex: 0 0 24px; width: 24px; height: 24px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); border-radius: 5px;
    color: var(--ink); background: color-mix(in srgb, var(--surface) 92%, var(--bms-frame-950));
    box-shadow: inset 0 1px color-mix(in srgb, white 42%, transparent);
    font-size: 12px; font-weight: 880; line-height: 1;
  }
  .mobile-workflow-item[data-status="completed"] .mobile-workflow-item-number {
    border-color: color-mix(in srgb, var(--bms-success) 72%, var(--line));
    color: white; background: var(--bms-success);
  }
  .mobile-workflow-item[data-status="in_progress"] .mobile-workflow-item-number {
    border-color: color-mix(in srgb, var(--bms-primary) 78%, var(--line));
    color: white; background: var(--bms-primary);
  }
  .mobile-workflow-item[data-status="blocked"] .mobile-workflow-item-number {
    border-color: color-mix(in srgb, var(--bms-danger) 78%, var(--line));
    color: white; background: var(--bms-danger);
  }
  .mobile-workflow-item[data-status="skipped"] .mobile-workflow-item-number {
    color: var(--muted); background: var(--surface-soft); opacity: .72;
  }
  .mobile-workflow-label-viewport {
    position: relative; z-index: 1; display: block;
    width: auto; max-width: none; overflow: visible; white-space: nowrap;
    transform-origin: left center;
    will-change: transform, filter;
  }
  .mobile-workflow-wheel[data-dock-side="right"] .mobile-workflow-label-viewport { transform-origin: right center; }
  .mobile-workflow-label {
    display: inline-block; font-size: 13px; letter-spacing: 0;
    transform: none; transform-origin: left center; will-change: filter;
  }
  .mobile-workflow-item[aria-disabled="true"] { text-decoration: line-through; }
  .mobile-workflow-item[data-candidate="true"] { color: var(--ink); font-weight: 820; }
  .mobile-workflow-item[data-candidate="true"] .mobile-workflow-item-number {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 24%, transparent),
      inset 0 1px color-mix(in srgb, white 48%, transparent);
  }
  .mobile-workflow-item[data-confirming="true"] { color: var(--ink); }
  .mobile-workflow-item[data-confirming="true"]::after {
    background: var(--brand); box-shadow: 0 0 8px color-mix(in srgb, var(--brand) 58%, transparent);
  }
  .mobile-workflow-item[data-candidate="true"]::after {
    content: ""; position: absolute; z-index: 2; left: 10px; bottom: 4px;
    width: 38px; height: 2px; border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 62%, transparent);
  }
  .mobile-workflow-wheel[data-dock-side="right"] .mobile-workflow-item[data-candidate="true"]::after {
    right: 10px; left: auto;
  }
  .mobile-workflow-wheel[data-open="true"] .mobile-workflow-backdrop { opacity: 1; pointer-events: auto; }
  .mobile-workflow-wheel[data-open="true"] .mobile-workflow-membrane { opacity: 0; }
  .mobile-workflow-wheel[data-redocking="true"] .mobile-workflow-membrane { opacity: 1; transition: none; }
  .mobile-workflow-wheel[data-open="true"] .mobile-workflow-control {
    top: calc(50dvh - var(--workflow-mobile-drawer-height) / 2);
    width: var(--workflow-mobile-drawer-width); height: var(--workflow-mobile-drawer-height);
  }
  .mobile-workflow-wheel[data-open="true"] .mobile-workflow-handle {
    inset: 64px auto 64px 0; width: 4px; height: auto; border-radius: 0 4px 4px 0;
  }
  .mobile-workflow-wheel[data-open="true"][data-dock-side="right"] .mobile-workflow-handle {
    inset: 64px 0 64px auto; border-radius: 4px 0 0 4px;
  }
  .mobile-workflow-wheel[data-open="true"] .mobile-workflow-handle-trigger { pointer-events: none; }
  .mobile-workflow-wheel[data-open="true"] .mobile-workflow-picker { opacity: 1; }
  .mobile-workflow-wheel[data-redocking="true"] .mobile-workflow-picker {
    opacity: var(--workflow-redock-content-opacity, 1);
    transition: none;
  }
  .mobile-workflow-wheel[data-redocking="true"] .mobile-workflow-handle {
    opacity: var(--workflow-redock-content-opacity, 1);
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --workflow-mobile-drawer-width: min(164px, 34vw);
    --workflow-mobile-drawer-height: min(276px, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 12px));
    --workflow-mobile-item-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --workflow-mobile-morph-duration: 110ms; }
  .mobile-workflow-picker { perspective: 900px; transition-delay: 0ms; }
  .mobile-workflow-label-viewport { transform: none !important; }
  .mobile-workflow-item-glass { transform: none !important; }
  .mobile-workflow-wheel::after, .mobile-workflow-membrane { transition: none; }
  .mobile-workflow-control { transition-duration: 110ms; }
  .mobile-workflow-membrane-sheet { filter: none; }
}