/* MV_ContribSubmit (#211) — the contributor's "Submit for review" button + the
   "sent for review" banner. Mirrors the review-paused banner's visual language
   (css/resolution-ui.css) so the contributor's two locked states read alike. */

.toolbar__submit-review {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Floats above the tree canvas while the working copy is submitted (and the owner
   isn't actively reviewing — that banner takes precedence). Same frame as
   .review-paused, with the heritage brass accent for a positive "it's on its way"
   feel rather than a paused one. */
.contrib-submitted {
  position: absolute;
  top: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: min(620px, calc(100% - 2 * var(--space-md)));
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-highlight-soft);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-highlight);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.contrib-submitted__icon {
  flex: 0 0 auto;
  font-size: var(--font-size-lg);
  line-height: 1.2;
  color: var(--color-highlight);
}

.contrib-submitted__text {
  flex: 1 1 auto;
  min-width: 0;
}

.contrib-submitted__headline {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.contrib-submitted__sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
}

.contrib-submitted__withdraw {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* "This tree has new changes" refresh offer (#398) — shown to a viewer (or any
   read-only shared load) when the freshness watch sees the file change
   underneath. Same floating frame as the two lock banners so all shared-tree
   notices read alike; accent stays the warm highlight (it's good news). */
.tree-updated {
  position: absolute;
  top: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: min(620px, calc(100% - 2 * var(--space-md)));
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-highlight-soft);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-highlight);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.tree-updated__icon {
  flex: 0 0 auto;
  font-size: var(--font-size-lg);
  line-height: 1.2;
  color: var(--color-highlight);
}

.tree-updated__text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text);
}

.tree-updated__refresh {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---- Touch / small viewports (MOBILE/TOUCH PARITY RULE) ---- */
@media (max-width: 640px) {
  .contrib-submitted,
  .tree-updated {
    flex-wrap: wrap;
  }
  .contrib-submitted__withdraw,
  .tree-updated__refresh {
    flex: 1 1 100%;
    min-height: var(--touch-target-min, 44px);
  }
}