/* VenueBrief Outputs workspace.
   Mounts the existing Manager Brief and Relay interfaces without changing their generators. */

.vbOutputsWorkspace {
  display: grid;
  gap: 18px;
  color: var(--vb-sc-color-ink, #18232d);
  font-family: var(--vb-sc-font-sans, "IBM Plex Sans", Inter, ui-sans-serif, system-ui, sans-serif);
}

.vbOutputsContext {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
  border: 1px solid var(--vb-sc-color-line, #d7dce1);
  border-radius: var(--vb-sc-radius-panel, 12px);
  background: var(--vb-sc-color-surface, #fff);
}

.vbOutputsContext > div { min-width: 0; }
.vbOutputsContext span,
.vbOutputsEyebrow,
.vbOutputsRequirement span {
  color: var(--vb-sc-color-brand, #70293b);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.vbOutputsContext h2 { margin: 3px 0; font-size: 22px; line-height: 1.15; }
.vbOutputsContext p { margin: 0; color: var(--vb-sc-color-muted, #667085); font-size: 14px; }
.vbOutputsContext p b { color: var(--vb-sc-color-text, #344054); font-family: var(--vb-sc-font-mono, "IBM Plex Mono", monospace); }
.vbOutputsContext button,
.vbOutputsRequirement button {
  min-height: var(--vb-sc-touch-min, 44px);
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid var(--vb-sc-color-line, #d7dce1);
  border-radius: var(--vb-sc-radius-control, 8px);
  background: #fff;
  color: var(--vb-sc-color-ink, #18232d);
  font-weight: 650;
}

.vbOutputsCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.vbOutputsCard {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 156px;
  align-content: start;
  gap: 6px;
  padding: 18px 19px;
  overflow: hidden;
  border: 1px solid var(--vb-sc-color-line, #d7dce1);
  border-radius: var(--vb-sc-radius-panel, 12px);
  background: var(--vb-sc-color-surface, #fff);
  color: var(--vb-sc-color-ink, #18232d);
  text-align: left;
}

.vbOutputsCard::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #a9adb3;
  content: "";
}
.vbOutputsCard[data-state="current"]::before { background: var(--vb-sc-color-ready, #216b49); }
.vbOutputsCard[data-state="ready"]::before,
.vbOutputsCard[data-state="needs-update"]::before { background: var(--vb-sc-color-check, #946000); }
.vbOutputsCard[data-state="locked"]::before { background: var(--vb-sc-color-blocker, #b42318); }
.vbOutputsCard[data-selected="true"] {
  border-color: var(--vb-sc-color-brand, #70293b);
  box-shadow: 0 0 0 2px rgb(112 41 59 / 10%);
}
.vbOutputsCard:hover { background: var(--vb-sc-color-surface-muted, #f7f8f9); }
.vbOutputsCardLabel { color: var(--vb-sc-color-muted, #667085); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.vbOutputsCard strong { font-size: 21px; line-height: 1.15; }
.vbOutputsCard small { color: var(--vb-sc-color-muted, #667085); font-size: 13px; line-height: 1.4; }
.vbOutputsCardOpen { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 9px; color: var(--vb-sc-color-brand, #70293b); font-size: 13px; font-weight: 700; }

.vbOutputsStage {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--vb-sc-color-line, #d7dce1);
  border-radius: var(--vb-sc-radius-panel, 12px);
  background: var(--vb-sc-color-surface, #fff);
}

.vbOutputsStage > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--vb-sc-color-line, #d7dce1);
}
.vbOutputsStage > header > div:first-child { min-width: 0; }
.vbOutputsStage h2 { margin: 4px 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.08; letter-spacing: -.025em; }
.vbOutputsStage header p { max-width: 720px; margin: 0; color: var(--vb-sc-color-muted, #667085); font-size: 14px; }

.vbOutputsStageActions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}
.vbOutputsState {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid var(--vb-sc-color-line, #d7dce1);
  border-radius: 999px;
  background: var(--vb-sc-color-surface-muted, #f7f8f9);
  color: var(--vb-sc-color-muted, #667085);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.vbOutputsState[data-state="current"] { border-color: #b7d9c4; background: var(--vb-sc-color-ready-bg, #edf7f1); color: var(--vb-sc-color-ready, #216b49); }
.vbOutputsState[data-state="ready"],
.vbOutputsState[data-state="needs-update"] { border-color: #e6cc99; background: var(--vb-sc-color-check-bg, #fff7e8); color: var(--vb-sc-color-check, #946000); }
.vbOutputsState[data-state="locked"] { border-color: #efb3ae; background: var(--vb-sc-color-blocker-bg, #fff0ef); color: var(--vb-sc-color-blocker, #b42318); }

.vbOutputsPrimary {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--vb-sc-color-brand, #70293b);
  border-radius: var(--vb-sc-radius-control, 8px);
  background: var(--vb-sc-color-brand, #70293b);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.vbOutputsPrimary:hover { border-color: var(--vb-sc-color-brand-hover, #5f2232); background: var(--vb-sc-color-brand-hover, #5f2232); }

.vbOutputsContext button:focus-visible,
.vbOutputsCard:focus-visible,
.vbOutputsPrimary:focus-visible,
.vbOutputsRequirement button:focus-visible {
  outline: 3px solid rgb(40 95 122 / 34%);
  outline-offset: 2px;
}

.vbOutputsRequirement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 18px;
  padding: 18px;
  border: 1px solid #e6cc99;
  border-radius: var(--vb-sc-radius-panel, 12px);
  background: var(--vb-sc-color-check-bg, #fff7e8);
}
.vbOutputsRequirement[hidden] { display: none; }
.vbOutputsRequirement h3 { margin: 4px 0; font-size: 20px; line-height: 1.2; }
.vbOutputsRequirement p { margin: 0; color: var(--vb-sc-color-muted, #667085); font-size: 13px; }
.vbOutputsRequirement button { border-color: var(--vb-sc-color-brand, #70293b); background: var(--vb-sc-color-brand, #70293b); color: #fff; }

.vbOutputsPreviewHost {
  min-width: 0;
  padding: 18px;
  background: var(--vb-sc-color-canvas, #f3f1ec);
}
.vbOutputsPreviewHost:empty { display: none; }
.vbOutputsPreviewHost #paper,
.vbOutputsPreviewHost #relay {
  width: 100%;
  max-width: none;
  margin: 0;
  box-shadow: none;
}
.vbOutputsPreviewHost #paper { border-radius: 10px; }
.vbOutputsPreviewHost #relay { border-radius: 10px; }
.vbOutputsPreviewHost #relay[hidden] { display: none; }

@media (max-width: 780px) {
  .vbOutputsCards { grid-template-columns: 1fr; }
  .vbOutputsCard { min-height: 132px; }
  .vbOutputsStage > header { display: grid; }
  .vbOutputsStageActions { justify-content: space-between; }
  .vbOutputsPrimary { flex: 1; }
}

@media (max-width: 520px) {
  .vbOutputsWorkspace { gap: 14px; }
  .vbOutputsContext { display: grid; padding: 14px; }
  .vbOutputsContext button { width: 100%; }
  .vbOutputsCards { gap: 10px; }
  .vbOutputsCard { min-height: 118px; padding: 15px 16px; }
  .vbOutputsCard strong { font-size: 18px; }
  .vbOutputsStage > header { gap: 14px; padding: 16px; }
  .vbOutputsStageActions { display: grid; grid-template-columns: 1fr; }
  .vbOutputsState { width: max-content; }
  .vbOutputsPrimary { width: 100%; }
  .vbOutputsRequirement { display: grid; margin: 12px; padding: 15px; }
  .vbOutputsRequirement button { width: 100%; }
  .vbOutputsPreviewHost { padding: 10px; }
  .vbOutputsPreviewHost #paper,
  .vbOutputsPreviewHost #relay { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .vbOutputsCard,
  .vbOutputsPrimary { transition: none; }
}

@media print {
  body.vbOutputsPrintingBrief { background: #fff !important; }
  body.vbOutputsPrintingBrief .vbAppRail,
  body.vbOutputsPrintingBrief .vbAppTopbar,
  body.vbOutputsPrintingBrief .vbGlobalNav,
  body.vbOutputsPrintingBrief main.wrap,
  body.vbOutputsPrintingBrief .bottomNav,
  body.vbOutputsPrintingBrief .vbShellDestination:not([data-vb-destination-view="outputs"]),
  body.vbOutputsPrintingBrief [data-vb-destination-view="outputs"] > .vbShellDestinationHeader,
  body.vbOutputsPrintingBrief .vbOutputsContext,
  body.vbOutputsPrintingBrief .vbOutputsCards,
  body.vbOutputsPrintingBrief .vbOutputsStage > header,
  body.vbOutputsPrintingBrief .vbOutputsRequirement,
  body.vbOutputsPrintingBrief #relay { display: none !important; }
  body.vbOutputsPrintingBrief .vbAppShell,
  body.vbOutputsPrintingBrief .vbAppStage,
  body.vbOutputsPrintingBrief .vbAppViewHost,
  body.vbOutputsPrintingBrief [data-vb-destination-view="outputs"],
  body.vbOutputsPrintingBrief .vbOutputsWorkspace,
  body.vbOutputsPrintingBrief .vbOutputsStage,
  body.vbOutputsPrintingBrief .vbOutputsPreviewHost { display: block !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #fff !important; box-shadow: none !important; }
  body.vbOutputsPrintingBrief #paper { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
}