/* The export sheet (design/v5/V5Work.dc.html): over a dimmed window, the formats, a preview, then
   Cancel and the one primary, Export. */

.ex-layer { position: fixed; z-index: 60; inset: 0; }
.ex-scrim { position: absolute; inset: 0; padding: 0; border: 0; background: var(--scrim); cursor: default; }
.ex-sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  padding: 20px;
  border-radius: 18px;
  background: var(--glass-menu);
  translate: -50% -50%;
}
.ex-sheet h2 { margin: 0; overflow: hidden; color: var(--fg-strong); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ex-sub { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.ex-fmts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ex-fmt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 64px;
  border: 0;
  border-radius: 14px;
  background-color: var(--fill);
  box-shadow: inset 0 0 0 1.5px transparent;
  color: var(--fg-strong);
  font: inherit;
}
button.b.ex-fmt { background-color: var(--fill); }
.ex-fmt[aria-checked="true"] { background-color: var(--sel) !important; box-shadow: inset 0 0 0 1.5px var(--accent-edge); }
.ex-ext { font-size: 13px; font-weight: 600; }
.ex-name { color: var(--muted); font-size: 11px; }
.ex-preview {
  height: 150px;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 10px;
  background: var(--well);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}
.ex-acts { display: flex; justify-content: flex-end; gap: 8px; }
/* Export Every Note: plain words at the row's left, away from the one tinted action */
.ex-every { height: 32px; margin: 0 auto 0 -10px; padding: 0 10px; border: 0; border-radius: 10px; color: var(--muted); font: 500 13px var(--font-ui); }
.ex-cancel { height: 32px; padding: 0 14px; border: 0; border-radius: 10px; color: var(--fg); font: 500 13px var(--font-ui); }
.ex-go {
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--pri);
  color: var(--fg-strong);
  font: 600 13px var(--font-ui);
  transition: background-color 120ms var(--ease);
}
@media (hover: hover) { .ex-go:hover { background: var(--pri-hover); } }
.ex-go:active { background: var(--pri-press); }