.joint-work-dialog-panel{width:min(960px,calc(100vw - 32px));max-height:min(900px,calc(100dvh - 32px));overflow:auto}.joint-work-step-label{margin:0 0 4px;color:var(--accent,#8b4f63);font-size:.78rem;font-weight:800;letter-spacing:.04em}.joint-work-picker-toolbar,.joint-work-selection-summary,.joint-work-order-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.joint-work-picker-toolbar{margin:18px 0 12px}.joint-work-view-tabs{display:flex;padding:3px;border:1px solid rgba(91,63,72,.18);border-radius:14px;background:rgba(255,255,255,.6)}.joint-work-view-tabs button{min-height:40px;padding:0 18px;border:0;border-radius:11px;background:transparent;color:inherit;font-weight:750}.joint-work-view-tabs button.is-active{background:#fff;box-shadow:0 3px 12px rgba(70,42,51,.11);color:#8b4f63}.joint-work-search{flex:1;max-width:320px}.joint-work-search input{box-sizing:border-box;width:100%;min-height:44px;padding:0 14px;border:1px solid rgba(91,63,72,.2);border-radius:12px;background:#fff;color:inherit;font:inherit}.joint-work-category-nav{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:thin}.joint-work-category-nav button{flex:0 0 auto;min-height:40px;padding:0 14px;border:1px solid rgba(91,63,72,.18);border-radius:999px;background:#fff;color:inherit}.joint-work-category-nav button.is-active{border-color:#9d6174;background:#f8e9ee;color:#7d4054}.joint-work-selection-summary{padding:10px 2px}.joint-work-selection-summary span{color:var(--text-muted,#75666c);font-size:.84rem}.joint-work-pattern-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-height:390px;overflow:auto;padding:2px}.joint-work-pattern-choice{position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0;padding:0;border:2px solid transparent;border-radius:16px;background:#fff;box-shadow:0 5px 18px rgba(70,42,51,.08);overflow:hidden;text-align:left;color:inherit}.joint-work-pattern-choice:hover{transform:translateY(-1px)}.joint-work-pattern-choice.is-selected{border-color:#9d6174;box-shadow:0 0 0 3px rgba(157,97,116,.13)}.joint-work-choice-number{position:absolute;z-index:2;top:8px;left:8px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#8b4f63;color:#fff;font-size:.78rem;font-weight:900}.joint-work-choice-thumb{display:block;aspect-ratio:1;overflow:hidden;background:#f6f0f2}.joint-work-choice-thumb canvas,.joint-work-choice-thumb img{width:100%;height:100%;object-fit:cover}.joint-work-choice-copy{display:grid;gap:3px;padding:10px}.joint-work-choice-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joint-work-choice-copy small{color:var(--text-muted,#75666c)}.joint-work-settings{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.joint-work-cover-preview{grid-column:2;display:grid;place-items:center;min-height:130px;border:1px dashed rgba(91,63,72,.28);border-radius:14px;background:#fbf7f8;overflow:hidden;color:var(--text-muted,#75666c)}.joint-work-cover-preview img{width:100%;height:180px;object-fit:cover}.joint-work-order-head{margin:22px 0 10px}.joint-work-order-head h3,.joint-work-order-head p{margin:0}.joint-work-order-head p{margin-top:3px;color:var(--text-muted,#75666c);font-size:.86rem}.joint-work-order-list{display:grid;gap:8px;max-height:320px;overflow:auto;margin:0;padding:2px;list-style:none;counter-reset:joint-order}.joint-work-order-item{display:grid;grid-template-columns:44px 48px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:62px;padding:8px 10px;border:1px solid rgba(91,63,72,.14);border-radius:14px;background:#fff;counter-increment:joint-order}.joint-work-order-item.is-dragging{opacity:.58}.joint-work-drag-handle{display:grid;place-items:center;min-width:44px;min-height:44px;border:0;border-radius:10px;background:#f7eff2;color:#8b4f63;cursor:grab;font-size:1.2rem;touch-action:none}.joint-work-order-index{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#8b4f63;color:#fff;font-weight:900}.joint-work-order-copy{min-width:0}.joint-work-order-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joint-work-order-copy small{color:var(--text-muted,#75666c)}.joint-work-order-buttons{display:flex;gap:4px}.joint-work-order-buttons button{min-width:44px;min-height:44px;border:1px solid rgba(91,63,72,.16);border-radius:10px;background:#fff;color:inherit}.joint-work-card{position:relative}.joint-work-card .my-pattern-thumb{background:#f7eef1}.joint-work-cover-image{display:block;width:100%;height:100%;object-fit:cover}.joint-work-badge{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;background:#8b4f63;color:#fff;font-size:.75rem;font-weight:800}.joint-work-card .my-pattern-info p{line-height:1.55}.joint-work-empty{grid-column:1/-1;padding:34px 16px;text-align:center;color:var(--text-muted,#75666c)}
.joint-workbench-nav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;width:min(100%,560px);margin-inline:auto}.joint-workbench-step{min-width:44px;min-height:44px;border:1px solid rgba(91,63,72,.18);border-radius:13px;background:#fff;color:#704556;font-size:1.25rem}.joint-workbench-step:disabled{opacity:.35}.joint-workbench-current{min-height:44px;padding:7px 12px;border:1px solid rgba(91,63,72,.18);border-radius:13px;background:#fff;color:inherit}.joint-workbench-current strong,.joint-workbench-current small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joint-workbench-current small{color:var(--text-muted,#75666c)}.joint-workbench-menu{grid-column:1/-1;display:grid;gap:5px;max-height:240px;overflow:auto;padding:6px;border:1px solid rgba(91,63,72,.14);border-radius:14px;background:#fff;box-shadow:0 12px 32px rgba(70,42,51,.14)}.joint-workbench-menu[hidden]{display:none}.joint-workbench-menu button{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:44px;padding:6px 9px;border:0;border-radius:10px;background:transparent;color:inherit;text-align:left}.joint-workbench-menu button[aria-current=true]{background:#f7e9ee;color:#773f52}.joint-workbench-menu span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eee1e6;font-weight:850}.joint-workbench-menu strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joint-workbench-menu small{color:var(--text-muted,#75666c)}
@media(max-width:720px){.joint-work-dialog-panel{width:100%;max-width:none;max-height:92dvh;margin-top:auto;border-radius:22px 22px 0 0;padding:18px 14px calc(18px + env(safe-area-inset-bottom))}.joint-work-picker-toolbar{align-items:stretch;flex-direction:column;gap:10px}.joint-work-search{max-width:none}.joint-work-pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:42dvh}.joint-work-settings{grid-template-columns:1fr}.joint-work-cover-preview{grid-column:1;min-height:110px}.joint-work-order-list{max-height:38dvh}.joint-work-order-item{grid-template-columns:44px 38px minmax(0,1fr)}.joint-work-order-buttons{grid-column:1/-1;justify-content:flex-end}.joint-work-actions{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));z-index:4;margin:12px -14px calc(-18px - env(safe-area-inset-bottom));padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}.joint-work-actions .button{flex:1;min-height:46px}.joint-workbench-nav{width:100%}}

/* The selected-work order is a true sortable list: the lifted row follows the pointer,
   a stable placeholder marks the drop position, and displaced rows use compositor-only FLIP motion. */
.joint-work-order-list {
  overscroll-behavior: contain;
  scroll-padding-block: 12px;
}

.joint-work-order-item {
  grid-template-columns: 44px 42px 64px minmax(0, 1fr) auto;
  min-height: 78px;
  transform-origin: center;
}

.joint-work-order-thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 56px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(91, 63, 72, .13);
  border-radius: 10px;
  background: #f8f3f4;
  box-sizing: border-box;
}

.joint-work-order-thumb .pattern-thumb-svg {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 7px;
}

.joint-work-drag-handle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.joint-work-drag-handle:active,
.joint-work-drag-handle[aria-pressed="true"] {
  cursor: grabbing;
  background: #eedde3;
}

.joint-work-order-placeholder {
  min-height: 78px;
  border: 2px dashed rgba(139, 79, 99, .38);
  border-radius: 14px;
  background: rgba(248, 233, 238, .48);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .55);
  box-sizing: border-box;
}

.joint-work-order-item.is-dragging {
  opacity: 1;
  border-color: rgba(139, 79, 99, .48);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 42px rgba(70, 42, 51, .22), 0 0 0 3px rgba(157, 97, 116, .12);
  cursor: grabbing;
}

.joint-work-order-list.is-reordering {
  cursor: grabbing;
}

body.is-joint-reordering {
  cursor: grabbing;
  user-select: none;
}

@media(max-width:720px) {
  .joint-work-order-item {
    grid-template-columns: 44px 36px 52px minmax(0, 1fr);
    gap: 8px;
    min-height: 72px;
    padding: 8px;
  }

  .joint-work-order-thumb {
    width: 52px;
    height: 52px;
  }

  .joint-work-order-buttons {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .joint-work-order-placeholder {
    min-height: 72px;
  }
}

/* Keep the name, cover controls, and cover preview as one compact settings group.
   The preview reserves stable space and contains the whole image instead of cropping it. */
.joint-work-settings {
  grid-template-columns: minmax(260px, .9fr) minmax(340px, 1.1fr);
  align-items: stretch;
  gap: 18px;
  margin-top: 12px;
}

.joint-work-settings-fields {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
}

.joint-work-cover-field {
  min-width: 0;
}

.joint-work-cover-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.joint-work-cover-label-row > label {
  min-width: 0;
}

.joint-work-cover-remove {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(145, 64, 82, .28);
  border-radius: 10px;
  background: #fff;
  color: #823e51;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.joint-work-cover-remove:hover {
  border-color: rgba(145, 64, 82, .52);
  background: #fbf0f3;
  color: #6e3042;
}

.joint-work-cover-remove:focus-visible {
  outline: 3px solid rgba(157, 97, 116, .24);
  outline-offset: 2px;
}

.joint-work-cover-field .file-field {
  box-sizing: border-box;
  min-width: 0;
}

.joint-work-cover-field small {
  color: var(--text-muted, #75666c);
  font-weight: 650;
  line-height: 1.55;
}

.joint-work-cover-preview {
  grid-column: auto;
  min-width: 0;
  min-height: 196px;
  padding: 10px;
  background:
    linear-gradient(45deg, rgba(157, 97, 116, .035) 25%, transparent 25%, transparent 75%, rgba(157, 97, 116, .035) 75%),
    linear-gradient(45deg, rgba(157, 97, 116, .035) 25%, transparent 25%, transparent 75%, rgba(157, 97, 116, .035) 75%),
    #fbf7f8;
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}

.joint-work-cover-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
}

.joint-work-cover-preview > span {
  padding: 24px;
  text-align: center;
  line-height: 1.55;
}

.joint-work-order-head {
  margin-top: 18px;
}

@media(max-width:720px) {
  .joint-work-settings {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .joint-work-settings-fields {
    gap: 14px;
  }

  .joint-work-cover-preview {
    grid-column: 1;
    min-height: 160px;
    height: clamp(160px, 26dvh, 220px);
  }

  .joint-work-cover-preview img {
    max-height: 100%;
  }
}

@media(prefers-reduced-motion:reduce) {
  .joint-work-cover-remove {
    transition: none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .joint-work-order-item,
  .joint-work-order-placeholder {
    transition: none !important;
    animation: none !important;
  }
}
@media(prefers-reduced-motion:reduce){.joint-work-pattern-choice{transition:none!important}}
.joint-workbench-menu.is-floating{position:fixed;z-index:var(--z-floating-layer,2147483000);box-sizing:border-box;margin:0;overscroll-behavior:contain;scrollbar-gutter:stable;transform:none!important}

/* The joint-work selector is a true overlay.  Keep this defensive rule tied to
   visibility as well as `.is-floating`, so opening the list can never insert a
   temporary second grid row and squeeze the workbench canvas. */
.joint-workbench-menu:not([hidden]) {
  position: fixed !important;
  z-index: var(--z-floating-layer, 2147483000) !important;
  box-sizing: border-box;
  margin: 0 !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  transform: none !important;
}

/* Keep the confirmation actions anchored to the dialog frame. Only the content above
   them scrolls, so the last selected work can always clear the footer without overlap. */
.joint-work-dialog-panel {
  display: flex;
  flex-direction: column;
  height: min(900px, calc(100dvh - 32px));
  overflow: hidden;
}

.joint-work-dialog-panel > .modal-head {
  flex: 0 0 auto;
}

.joint-work-dialog-panel > #jointWorkForm {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.joint-work-dialog-panel .joint-work-step {
  width: 100%;
  min-height: 0;
}

#jointWorkSelectStep:not(.is-hidden) {
  overflow-y: auto;
  overscroll-behavior: contain;
}

#jointWorkPreviewStep:not(.is-hidden) {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.joint-work-preview-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 16px;
  padding: 0 4px 20px 0;
}

.joint-work-preview-scroll .joint-work-order-list {
  max-height: none;
  overflow: visible;
}

.joint-work-actions {
  position: relative;
  bottom: auto;
  z-index: 5;
  flex: 0 0 auto;
  margin: 0 -14px -14px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(91, 63, 72, .14);
  background: rgba(255, 253, 249, .98);
  box-shadow: 0 -10px 24px rgba(70, 42, 51, .07);
  backdrop-filter: blur(12px);
}

@media(max-width:720px) {
  .joint-work-dialog-panel {
    height: 92dvh;
    overflow: hidden;
  }

  .joint-work-preview-scroll {
    padding-right: 2px;
    padding-bottom: 18px;
  }

  .joint-work-actions {
    position: relative;
    bottom: auto;
    margin: 0 -14px calc(-18px - env(safe-area-inset-bottom));
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }

  .joint-work-actions .button {
    flex: 1;
    min-height: 46px;
  }
}